详解Angular2组件之间如何通信
组件之间的共享可以有好几种方式
父->子input方式
import{Component,Input}from'angular2/core';
@Component({
selector:'child',
template:`
child{{content}}
`
})
classChild{
@Input()content:string;
}
@Component({
selector:'App',
directives:[Child],
template:`
App
`
})
exportclassApp{
i:number=0;
constructor(){
setInterval(()=>{
this.i++;
},1000)
}
}
子->父output方式
import{Output,EventEmitter,Component}from'angular2/core';
@Component({
selector:'child',
template:`
child
`
})
classChild{
@Output()updateNumberI:EventEmitter=newEventEmitter();
i:number=0;
constructor(){
setInterval(()=>{
this.updateNumberI.emit(++this.i);
},1000)
}
}
@Component({
selector:'App',
directives:[Child],
template:`
App{{i}}
`
})
exportclassApp{
i:number=0;
numberIChange(i:number){
this.i=i;
}
}
子获得父实例
如果不了解forwardRef用处的的可以看#11
@Host表示这个Injector必须是hostelement在这里可以理解为parent
import{Host,Component,forwardRef}from'angular2/core';
@Component({
selector:'child',
template:`
child
`
})
classChild{
constructor(@Host()@Inject(forwardRef(()=>App))app:App){
setInterval(()=>{
app.i++;
},1000);
}
}
@Component({
selector:'App',
directives:[Child],
template:`
App{{i}}
父获得子实例
子元素指令在父constructor时是获取不到的，所以必须在组件的ngAfterViewInit生命周期钩子后才能获取，如果对组件生命周期不了解的话，可以参考#56
import{ViewChild,Component}from'angular2/core';
@Component({
selector:'child',
template:`
child{{i}}
`
})
classChild{
i:number=0;
}
@Component({
selector:'App',
directives:[Child],
template:`
App{{i}}
service方式
import{Component,Injectable}from'angular2/core';
@Injectable();
classKittencupService{
i:number=0;
}
@Component({
selector:'child',
template:`
child{{service.i}}
`
})
classChild{
constructor(publicservice:KittencupService){
}
}
@Component({
selector:'App',
directives:[Child],
providers:[KittencupService],
template:`
App{{i}}
serviceEventEmitter方式
import{Component,Injectable,EventEmitter}from'angular2/core';
@Injectable()
classKittencupService{
change:EventEmitter;
constructor(){
this.change=newEventEmitter();
}
}
@Component({
selector:'child',
template:`
child{{i}}
`
})
classChild{
publici:number=0;
constructor(publicservice:KittencupService){
service.change.subscribe((value:number)=>{
this.i=value;
})
}
}
@Component({
selector:'App',
directives:[Child],
providers:[KittencupService],
template:`
App{{i}}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。