Angular 2 组件之间如何通信？

组件之间的共享可以有好几种方式

http://learnangular2测试数据/outputs/ 实例参考
https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#parent-to-child实例参考

http://learnangular2测试数据/viewChild/?实例参考

父->子 input 方式

 import { Component, Input}  from   'angular2/core ';
@ Component({
    selector :   'child ',
    template :  `
         <h2>child {{content}}</h2>
      `
})
 class  Child {
    @ Input() content :string;
}

@ Component({
    selector :   'App ',
    directives : [Child],
    template :  `
         <h1>App</h1>
         <child [content]="i"></child>
      `
})
 export  class  App {

    i :number  =  0;

     constructor() {
         setInterval(() => {
             this. i ++;
        },  1000)
    }

}                                              

子->父 output 方式

 import { Output, EventEmitter, Component}  from   'angular2/core ';

@ Component({
    selector :   'child ',
    template :  `
         <h2>child</h2>
      `
})
 class  Child {
    @ Output() updateNumberI :EventEmitter <number >  =  new  EventEmitter();
    i :number  =  0;

     constructor() {
         setInterval(() => {
             this. updateNumberI. emit( ++ this. i);
        },  1000)
    }
}

@ Component({
    selector :   'App ',
    directives : [Child],
    template :  `
         <h1>App {{i}}</h1>
         <child (updateNumberI)="numberIChange($event)"></child>
      `
})
 export  class  App {

    i :number  =  0;

     numberIChange( i : number){
         this. i  = i;
    }

}                                                                 

子获得父实例

如果不了解 forwardRef 用处的的可以看? #11
@Host ?表示这个 Injector 必须是 host element 在这里可以理解为? parent

 import { Host, Component, forwardRef}  from   'angular2/core ';

@ Component({
    selector :   'child ',
    template :  `
         <h2>child</h2>
      `
})
 class  Child {

     constructor(@ Host() @ Inject( forwardRef(() => App))  app : App) {
         setInterval(() => {
             app. i ++;
        },  1000);
    }
}

@ Component({
    selector :   'App ',
    directives : [Child],
    template :  `
         <h1>App {{i}}</h1>
         <child></child>
      `
})
 export  class  App {
    i :number  =  0;
}                                                    

父获得子实例

子元素指令在父 constructor 时是获取不到的，所以必须在组件的 ngAfterViewInit 生命周期钩子后才能获取，如果对组件生命周期不了解的话，可以参考? #56

 import { ViewChild, Component}  from   'angular2/core ';

@ Component({
    selector :   'child ',
    template :  `
         <h2>child {{i}}</h2>
      `
})
 class  Child {
    i :number  =  0;
}

@ Component({
    selector :   'App ',
    directives : [Child],
    template :  `
         <h1>App {{i}}</h1>
         <child></child>
      `
})
 export  class  App {

    @ ViewChild(Child) child :Child;
     ngAfterViewInit() {
         setInterval(() => {
             this. child. i ++;
        },  1000)
    }

}                                               

service 方式

   import { Component, Injectable}  from   'angular2/core ';

@ Injectable();
 class  KittencupService {
    i :number  =  0;
}

@ Component({
    selector :   'child ',
    template :  `
         <h2>child {{service.i}}</h2>
      `
})
 class  Child {

     constructor( public  service : KittencupService){

    }
}

@ Component({
    selector :   'App ',
    directives : [Child],
    providers : [KittencupService],
    template :  `
         <h1>App {{i}}</h1>
         <child></child>
      `
})
 export  class  App {

     constructor( service : KittencupService) {
         setInterval(() => {
             service. i ++;
        },  1000)
    }

}                                                          

service EventEmitter方式

 import { Component, Injectable, EventEmitter}  from   'angular2/core ';

@ Injectable()
 class  KittencupService {
    change : EventEmitter <number >;

     constructor(){
         this. change  =  new  EventEmitter();
    }
}

@ Component({
    selector :   'child ',
    template :  `
 <h2>child {{i}}</h2>
 `
})
 class  Child {

     public i :number  =  0;

     constructor( public  service : KittencupService){

         service. change. subscribe(( value : number) =>{
             this. i  = value;
        })
    }
}

@ Component({
    selector :   'App ',
    directives : [Child],
    providers : [KittencupService],
    template :  `
 <h1>App {{i}}</h1>
 <child></child>
 `
})
 export  class  App {

    i :number  =  0;

     constructor( service : KittencupService) {
         setInterval(() => {
             service. change. emit( ++ this. i);
        },  1000)
    }

}                                                                                 

查看更多关于Angular 2 组件之间如何通信？的详细内容...