有什么辦法可以將動態數據傳遞給Angular中的組件嗎？

Question

我試圖將動態數據傳遞給子組件。 但我總是在子組件中獲取未定義的數據。 以下是我正在做的事情。

ParentComponent.ts

results: any[];
ngOnInit() {
this.http.get('url').subscribe(data => this.results = data);
}

ParentComponent.html

<app-childComponent [dataNeeded]=results></app-childComponent>

ChildComponent.ts

@Input('dataNeeded') dataNeeded: any[];
ngOnInit() {
 console.log(dataNeeded); //Always undefiend
}

正如預期的那樣，它不會等待異步調用並返回undefined。 如何將動態數據傳遞給組件？

Answer 1

問題是UI線程將在可觀察完成的訂閱之前呈現子組件。

你需要這樣做：

import { ChangeDetectorRef } from '@angular/core';

constructor(private ref: ChangeDetectorRef) {}
ngOnInit() {
   this.http.get('url').subscribe(data => { 
     this.results = data;
     this.ref.markForCheck();
   });
}

在HTML中，您必須首先測試該值。

<ng-container *ngIf="results != null">
    <app-childComponent [dataNeeded]=results></app-childComponent>
</ng-container>

稍微描述一下， .markForCheck()將在訂閱后刷新結果，並將通知所有使用此“值”的組件更新其值，包括ng-container。 容器現在允許渲染子組件，這將保證當子進行其生命周期時結果不為null。

Answer 2

您可以嘗試使用OnChanges生命周期鈎子方法。

在您的情況下，您需要將其添加到您的子組件，如下所示：

ngOnChanges(changes) {
  if (changes['dataNeeded'] && this.dataNeeded) {
    console.log(this.dataNeeded);
  }
}

PS我還注意到你的ChildComponent.ts語法錯誤，它缺少this ：

ngOnInit() {
 console.log(this.dataNeeded);
}

Answer 3

如果您確定您的服務成功獲取data那么這將有效：

在父組件的html中添加引號：

<app-childComponent [dataNeeded]="results"></app-childComponent>

在您的子組件中，您將使用OnCh檢查Input的更改：

ngOnChanges(changes: SimpleChanges) {   
   for (let propName in changes) {
      // when your @Input value is changed  
      if(propName === "dataNeeded"){
          console.log(dataNeeded);
      }
   }
}

希望這會有所幫助:)

Answer 4

為什么不使用帶有異步管道的Observable。 如果要控制台記錄該值，請使用setter。 異步管道也會關注取消訂閱。

results: Observable<any[]>;
ngOnInit() {
  this.results = this.http.get('url');
}

在HTML中

<app-childComponent [dataNeeded]="results | async"></app-childComponent>

在您的孩子組件中

@Input('dataNeeded') 
set dataNeeded(val: any[]) {
  console.log(val);
}