Angular2指令未響應異步數據

Question

我有一個可以接收並作為輸入的組件。

@Input() data: SubDayFoodVM;

使用異步管道從其父級傳遞來的

<sub-day-food *ngIf="subDay" [data]="data | async"></sub-day-food>

SubDayFoodVM界面上的一個屬性是foodName ，它被傳遞給模板上的自定義指令。

<div ticker [text]="data.foodName" [size]="30"></div>

該偽指令創建一個帶有[text]的元素。 如果文本比其容器長，那么將創建一個重復元素，並且文本邊距像新聞自動收錄器一樣向左滑動。 這是我前一段時間創建的原始版本： PLUNKR 。

在此實現中，將文本設置為onInit

ngOnInit(): void {
    // ... 
    this.firstNode = this.createTickerNode( this.text );
}

這導致可觀察數據更新時文本未更新。 觸發股票行情操作時，新創建的元素包含新值，但原始元素保留。

異步數據更改時，如何更改實現以更新文本或重新呈現指令？

Answer 1

您需要實現OnChange生命周期掛鈎。