角親子溝通

Question

當我單擊父UI中的重置按鈕時，我想重置孩子的財產。 這是第一次工作。 即，當我單擊父級的重置按鈕時，第二次不調用Child的ngOnChanges方法。

以下選項對我來說很好用。 也就是說，在子級中定義雙向綁定，並通過this.resetChange.emit（false）將狀態傳遞回父級。 因此，發生的事情是當父項的resetTriggered設置為false時，立即調用子項的ngOnChanges，並且由於沒有其他條件（if（this.resetTriggered）），因此該子項在子項中停在那里。

有更好的解決方案嗎？ 即，我不想將變量狀態傳遞給父對象和父對象來處理此事件。 子級應該處理所有事情，以便不依賴父級來處理該子級的狀態更改。

父HTML ：

<app-customer (select)="onCustomerIdSelect($event)" [(reset)]="resetTriggered"></app-customer>

    <div style="text-align: right;padding-right: 10px;padding-top: 110px;">
        <button class="btn btn-primary submit" (click)="resetFilters()">Reset</button>
    </div>

父組件 ：

   resetTriggered: boolean = false;

   onLocationReset(resetChild: boolean){
    this.resetTriggered = resetChild;
  }

  ngAfterViewInit(){
    this._changeDetectorRef.detectChanges();
  }
  ngAfterViewChecked(){
    this._changeDetectorRef.detectChanges();
  }

   resetFilters() {
    console.log('resetFilters()');
    this.resetTriggered = true;
    this.searchRequest.reset();  
  }

子組件 ：

 resetTriggered: boolean;

  @Output() resetChange: EventEmitter<boolean> = new EventEmitter<boolean>();
  @Input() set reset(value) {
    this.resetTriggered = value;
  }

    ngOnChanges() 
  {
    console.log('reset in child - ' + this.resetTriggered);
    if(this.resetTriggered)
    {
      this.resetChange.emit(false);
      this.resetData();
    }
  }

Answer 1

我強烈建議通過父級和子級之間的@ Input / @ Output直接綁定進行組件交互。 對於許多較小的結構，這可能會起作用，但是一旦您擁有帶有多級嵌套的大型項目，嘗試從上至下遍歷變量時，您可能會頭疼。

更好的解決方案是通過總線進行通信，從而允許發射/調度和接收/訂閱數據。 一個好的開始是ngrx => Angular redux實現（ https://github.com/ngrx ）。 在那里，您可以實現不受組件層次結構約束的數據流。