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不同组件间的通信实例代码，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！

您可能感兴趣的文章:

• Angular2 父子组件数据通信实例
• Angular2 父子组件通信方式的示例
• angular中不同的组件间传值与通信的方法
• Angular 2父子组件之间共享服务通信的实现
• Angular2 组件通信的实例代码
• 详解Angular2组件之间如何通信
• angular4 共享服务在多个组件中数据通信的示例