（二）Angular 2 组件通信（ViewChild，EventEmitter）

一、ViewChild 方法（不便于组件解耦及组件重用）

1.创建父组件parent

2.创建子组件child

3.在child中创建 print 方法

print() {
    alert('print);
}

4.在parent.component.html中引入child组件

<app-child #child></app-child>

5.在parent中引入ViewChild并执行child方法

@ViewChild('child')
child: ChildComponent; //父组件中获得子组件的引用

ngOnInit(){
  this.child.print();
}

二、EventEmitter 方法，实质是使用Angular所提供的输入输出（Input，Output）（便于组件解耦，组件重用）

1.创建父组件parent

2.创建子组件child

3.在child中创建 print 方法

print() {
    alert('print);
}

4.在parent中定义EventEmitter 事件，并抛出

public parentEvt: EventEmitter<any> = new EventEmitter();

public emitEvt() {
    this.parentEvt.emit();   
}

5.在parent.component.html中引入child组件并传入parent的Event事件

<app-child [evt]='parentEvt'></app-child>

6.在child中使用@Input接收Event事件（参考Angular@Input用法），同时增加取消订阅事件（ngDestroy）

private pEvtSub: Subscription = null;
private pEvt: EventEmitter<any> = null;

@Input()
public set evt(value: EventEmitter<any>) {
    this.pEvt = value;
    if (!this.pEvt) {
        return
    }
    if (this.pEvtSub) {
        this.pEvtSub.unsubscribe();
    }
    this.pEvtSub = this.pEvt.subscribe((evt) => {
        this.print()
    });
}

ngDestroy() {
　　if (this.pEvtSub) {
　　　　this.pEvtSub.unsubscribe();
　　}
}

三、EventEmitter + Service 方法，实质是建立一个EventService做为中转进行事件发布，组件在ngOnInit中对事件进行订阅

转载于:https://www.cnblogs.com/chendongbky/p/11212094.html