Angularjs2不同组件间的通信实例代码

AngualrJs2官方方法是以@Input,@Output来实现组件间的相互传值，而且组件之间必须父子关系，下面给大家提供一个简单的方法，实现组件间的传值，不仅仅是父子组件，跨模块的组件也可以实现传值

/**
 *1.定义一个服务，作为传递参数的媒介
 */
@Injectable()
export class PrepService{
 //定义一个属性，作为组件之间的传递参数，也可以是一个对象或方法  
 profileInfo: any;
 }
 /**
 *2.传递参数的组件，我这边简单演示，直接就在构造器里面实现传参了
 */ 
@Component({
 selector: 'XXXXXXX',
 templateUrl:"./XXXXXX.html",
 styleUrls:["./XXXXXXX.css"]
})
export class ReportComponent {
 //定义要传递的参数(此处是一个对象，也可以是方法)    
 reponsePrep:any ={
  name : "腊肉豆皮",
  address："中欧五花肉"
 }
 //构造器注入PrepService服务  
 constructor(private ps:PrepService){
  //把当前组件参数赋值给PrepService的profileInfo属性
  ps.profileInfo = this.reponsePrep;
 }
 }
 /**
 *3.接受参数的组件
 */ 
@Component({
 selector: 'YYYYYY',
 templateUrl:"./YYYYYYYY.html",
 styleUrls:["./YYYYYYY.css"]
})
export class commandComponent {
 //定义参来接收来自PrepService服务profileInfo属性的值
 requestPrep:any; 
 //构造器注入PrepService服务  
 constructor(private ps:PrepService){
  //把PrepService的profileInfo属性的值赋值给requestPrep实现组件的之间的传值
  this.requestPrep = ps.profileInfo;
 }
 }

思路：定义一个服务作为传递参数的媒介注入在要传参的组件的构造器里面，然后对服务里面属性（传参媒介）来赋值和取值实现组件之间的传参。

以上所述是小编给大家介绍的Angularjs2不同组件间的通信实例代码，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！

# angularjs # 组件间的通信 # Angular2 父子组件数据通信实例 # Angular2 父子组件通信方式的示例 # angular中不同的组件间传值与通信的方法 # Angular 2父子组件之间共享服务通信的实现 # Angular2 组件通信的实例代码 # 详解Angular2组件之间如何通信 # angular4 共享服务在多个组件中数据通信的示例 # 是一个 # 给大家 # 小编 # 器里 # 就在 # 仅是 # 可以实现 # 提供一个 # 来实现 # 所述 # 给我留言 # 我这边 # 有任何 # 五花 # PrepService # class # profileInfo # export # Input # pre

返回目录在线咨询

上一篇：解析：域名建站系统破解后常见错误及修复方法
下一篇：在混合整数规划 (MIP) 中实现复杂逻辑“或” (OR) 约束的指南

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

全网整合营销服务商

Angularjs2不同组件间的通信实例代码

您的项目需求