Angular2 directive is not responding to async data

Question

I have a component that receives and observable as an input.

@Input() data: SubDayFoodVM;

Which was passed from it's parent using the async pipe

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

One property on the SubDayFoodVM interface is foodName which gets passed to a custom directive on the template.

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

This directive creates an element with the [text] passed into it. If the text is longer than it's container then then a duplicate element is created and the text margin slides to the left like a news ticker. Here is a primitive version that I created a while ago: PLUNKR .

In this implementation the text is set onInit

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

This has resulted in the text not updating when the observable data updates. When the ticker action is triggered, the newly created element contains the new value, but the original element remains.

How can I alter my implementation to update the text or re-render the directive when the asynchronous data changes?

Answer 1

您需要实现OnChange生命周期挂钩。