子组件暴露一个 EventEmitter 属性,当事件发生时,子组件利用该属性 emits(向上弹射)事件。父组件绑定到这个事件属性,并在事件发生时作出回应。子组件的 EventEmitter 属性是一个输出属性,通常带有@Output 装饰器(只推荐使用此种方式来实现子父组件通信)
- 子组件代码
@Output() onVoted = new EventEmitter<boolean>();
vote(agreed: boolean) {
this.onVoted.emit(agreed);
}
- 父组件代码
<app-voter *ngFor="let voter of voters"
[name]="voter"
(onVoted)="onVoted($event)">
</app-voter>
父组件与子组件通过本地变量互动
<app-countdown-timer #timer></app-countdown-timer>
#timer就代表了子组件,但是模板变量只能在模板中使用,不过我们可以依靠函数参数实现更多可能
<app-countdown-timer #timer></app-countdown-timer>
<button (click)=func(#timer)></button>
func(timer){
timer.log(); // 调用了子组件timer的log方法
}
父组件使用@ViewChild()实现与子组件通信
import { ChildComponent } from './child.component';
@ViewChild(ChildComponent)
private childComponent: ChildComponent;
log(){
this.childComponent.son() ; // 调用了子组件的son()方法
}
接着上面的,如果需要在父组件页面渲染子组件的变量
content() { // 在父组件声明一个方法
}
ngAfterViewInit() { // 在此生命周期钩子让此函数变成一个返回子组件变量的函数,不可缺少setTimeout
// 原因: Angular 会调用 ngAfterViewInit 生命周期钩子,但这时候再更新父组件视图的倒计时就已经太晚了。Angular 的单向数据流规则会阻止在同一个周期内更新父组件视图。应用在显示秒数之前会被迫再等一轮。
setTimeout(() => this.content = () => this.cameraComponent.title, 0);
}