Angular2 Direktive reagiert nicht auf asynchrone Daten

Question

Ich habe eine Komponente, die als Eingabe empfängt und beobachtbar ist.

@Input() data: SubDayFoodVM; 

Welche davon sind Eltern übergeben wurde mit dem Asynchron-Rohr

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

Eine Eigenschaft auf der SubDayFoodVM Schnittstelle ist foodName, die zu einer benutzerdefinierten Richtlinie über die Vorlage übergeben werden.

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

Diese Richtlinie schafft ein Element mit dem [text] hineingeben. Wenn der Text länger ist als sein Container, wird ein doppeltes Element erstellt und der Textrand wird wie ein Nachrichtenticker nach links verschoben. Hier ist eine primitive Version, die ich vor einiger Zeit erstellt habe: PLUNKR.

In dieser Implementierung wird der Text onInit gesetzt

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

Diese im Text geführt hat nicht aktualisiert, wenn das beobachtbaren Daten-Updates. Wenn die Ticker-Aktion ausgelöst wird, enthält das neu erstellte Element den neuen Wert, das ursprüngliche Element bleibt jedoch erhalten.

Wie kann ich meine Implementierung ändern, um den Text zu aktualisieren oder die Direktive erneut zu rendern, wenn sich die asynchronen Daten ändern?

Answer 1

Sie müssen OnChange Lifecycle-Haken implementieren.