angular 父组件和子组件通信的3种方式

子组件暴露一个 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);
  }

转载于:https://my.oschina.net/u/3615170/blog/1825035