组件通讯，意在不同的指令和组件之间共享信息。如何在两个多个组件之间共享信息呢。
最近在项目上，组件跟组件之间可能是父子关系，兄弟关系，爷孙关系都有。。。。。我也找找了很多关于组件之间通讯的方法，不同的方法应用在不同的场景，根据功能需求选择组件之间最适合的通讯方式。下面我就总结一下关于组件通讯的N多种方法。
1.父→子 input
parent.ts
selector: 'page-parent',templateUrl: 'parent.html',})
export class ParentPage {
i: number = 0;
constructor() {
setInterval(() => {
this.i++;
},1000)
}
}
parent.html
Parent
child.ts
selector: 'page-child',templateUrl: 'child.html',})
export class ChildPage {
@Input() content:string;
constructor() {
}
}
child.html
结果:
2.子→父 output
parent.ts
selector: 'page-parent',})
export class ParentPage {
i: number = 0;
numberIChange(i:number){
this.i = i;
}
}
parent.html
Parent:{{i}}
child.ts
selector: 'page-child',})
export class ChildPage {
@Output() changeNumber: EventEmitter
Number: number = 0;
constructor() {
setInterval(() => {
this.changeNumber.emit(++this.Number);
},1000)
}
}
child.html
结果：
3.子获得父实例
parent.ts
selector: 'page-parent',})
export class ParentPage {
i:number = 0;
}
parent.html
parent: {{i}}
child.ts
child.html
结果：
4.父获得子实例
parent.ts
selector: 'page-parent',})
export class ParentPage {
@ViewChild(ChildPage) child:ChildPage;
ngAfterViewInit() {
setInterval(()=> {
this.child.i++;
},1000)
}
}
parent.html
parent {{i}}
child.ts
selector: 'page-child',})
export class ChildPage {
i:number = 0;
}
child.html
child {{i}}
结果：
5.service
parent.ts
selector: 'page-parent',})
export class ParentPage {
i:number=0;
constructor(service:myService) {
setInterval(()=> {
service.i++;
},1000)
}
}
parent.html
parent {{i}}
child.ts
child.html
child {{service.i}}
myService.ts
ps:记得在app.module.ts 加上providers: [KmyService]
结果：
6.EventEmitter
myService.ts
constructor(){
this.change = new EventEmitter();
}
}
parent.ts
selector: 'page-parent',})
export class ParentPage {
i:number = 0;
constructor(service:myService) {
setInterval(()=> {
service.change.emit(++this.i);
},1000)
}
}
parent.html
parent {{i}}
child.ts
@Component({
selector: 'page-child',})
export class ChildPage {
i:number = 0;
constructor(public service:myService){
service.change.subscribe((value:number)=>{
this.i = value;
})
}
}
child.html
child {{i}}
结果：
7.订阅
parent.ts
selector: 'page-parent',})
export class ParentPage {
i:number=0;
constructor(public service:myService) {
setInterval(()=> {
this.service.StatusMission(this.i++);
},1000)
}
}
parent.html
parent
child.ts
ngOnDestroy() {
this.subscription.unsubscribe();
}
}
child.html
child {{i}}
myService.ts
export class myService {
private Source=new Subject
Status$=this.Source.asObservable();
StatusMission(message: any) {
this.Source.next(message);
}
}
结果：
以上七种组件与组件的通讯方式，可以选择应用于适合的场景里面，根据情况吧。希望对大家的学习有所帮助，也希望大家多多支持编程之家。
