原创-angularjs2不同组件间的通信

Posted Brian Huang

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了原创-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;
  }
 }

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

以上demo只是给一个简单的思路给大家,大家可以自由发挥

 

以上是关于原创-angularjs2不同组件间的通信的主要内容,如果未能解决你的问题,请参考以下文章

angularjs2 学习笔记 组件

angularjs2 学习笔记 组件

vue不同组件间的通信

vue组件间的通信方式

angularjs2 学习笔记 路由

Vue组件间的通信方式(多种场景,通俗易懂,建议收藏)