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);
  }