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

 更新时间:2017年05月06日 07:48:25   作者:德川hlkawa  
AngualrJs2官方方法是以@Input,@Output来实现组件间的相互传值,而且组件之间必须父子关系,下面给大家提供一个简单的方法,实现组件间的传值,不仅仅是父子组件,跨模块的组件也可以实现传值

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

相关文章

  • Angular4中的checkbox 全选按钮启用禁用

    Angular4中的checkbox 全选按钮启用禁用

    这篇文章主要介绍了Angular4中的checkbox 全选按钮启用禁用的相关资料,需要的朋友可以参考下
    2023-03-03
  • AngularJS $http post 传递参数数据的方法

    AngularJS $http post 传递参数数据的方法

    今天小编就为大家分享一篇AngularJS $http post 传递参数数据的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-10-10
  • AngularJS+Node.js实现在线聊天室

    AngularJS+Node.js实现在线聊天室

    随着互联网和信息技术的发展,如何快速构建高效、强大的动态网站成为很多人研究的热点。该文将结合AngularJS和Node.js构建一个在线聊天室,体现AngularJs和Node.js整合的优点。
    2015-08-08
  • AngularJS封装指令方法详解

    AngularJS封装指令方法详解

    这篇文章主要介绍了AngularJS封装指令方法,结合实例形式详细分析了AngularJS的功能、jQuery类库协作及组件封装的具体操作技巧,需要的朋友可以参考下
    2016-12-12
  • angular.fromJson与toJson方法用法示例

    angular.fromJson与toJson方法用法示例

    这篇文章主要介绍了angular.fromJson与toJson方法用法,结合实例形式分析了AngularJS使用fromJson与toJson方法进行json格式数据的解析与转换相关操作技巧,需要的朋友可以参考下
    2017-05-05
  • NodeJs——入门必看攻略

    NodeJs——入门必看攻略

    下面小编就为大家带来一篇NodeJs——入门必看攻略。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-06-06
  • AngularJS基础 ng-keydown 指令简单示例

    AngularJS基础 ng-keydown 指令简单示例

    本文主要介绍AngularJS ng-keydown 指令,在这里帮大家整理了ng-keydown 指令的基础资料,并附有代码,有需要的朋友可以参考下
    2016-08-08
  • angularjs过滤器--filter与ng-repeat配合有奇效

    angularjs过滤器--filter与ng-repeat配合有奇效

    本篇文章主要介绍了angularjs过滤器-filter与ng-repeat的相关知识。具有很好的参考价值。下面跟着小编一起来看下吧
    2017-04-04
  • Angular5中调用第三方js插件的方法

    Angular5中调用第三方js插件的方法

    下面小编就为大家分享一篇Angular5中调用第三方js插件的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-02-02
  • angular.extend方法的具体使用

    angular.extend方法的具体使用

    本篇文章主要介绍了angular.extend方法的具体使用,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09

最新评论