AnjularJs 组件之间的通讯

组件之间的共享可以有好几种方式
父->子 input 方式
   
   
   
   

    
    
    
    

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

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

  i:number = 0;

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

}
    
    
    
    
   
   
   
   
子->父 output 方式
   
   
   
   

    
    
    
    

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

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

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

@Component({
  selector: 'App' ,
  directives: [Child],
  template: `
    App {{i}}
    "numberIChange($event)" >
  `
})
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: `
    child
  `
})
class Child {

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

@Component({
  selector: 'App' ,
  directives: [Child],
  template: `
    App {{i}}

  `
})
export class App {
  i:number = 0;
}
    
    
    
    
   
   
   
   
父获得子实例
子元素指令在父constructor时是获取不到的，所以必须在组件的ngAfterViewInit生命周期钩子后才能获取，如果对组件生命周期不了解的话，可以参考#56
   
   
   
   

    
    
    
    

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

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

@Component({
  selector: 'App' ,
  directives: [Child],
  template: `
    App {{i}}

  `
})
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: `
    child {{service.i}}
  `
})
class Child {

  constructor(public service:KittencupService){

  }
}

@Component({
  selector: 'App' ,
  directives: [Child],
  providers: [KittencupService],
  template: `
    App {{i}}

  `
})
export class App {

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

}
    
    
    
    
   
   
   
   
service EventEmitter方式
   
   
   
   

    
    
    
    

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

@Injectable()
class KittencupService {
  change: EventEmitter;

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

@Component({
  selector: 'child' ,
  template: `
child {{i}}
`
})
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: `
App {{i}}

`
})
export class App {

  i:number = 0;

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

}