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生命周期挂钩。