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 );
}

这导致当可观察数据更新时文本没有更新。触发ticker动作时，新创建的元素包含新值，但保留原始元素。

当异步数据发生变化时，如何更改我的实现以更新文本或重新呈现指令？

Answer 1

你需要实现OnChange生命周期钩子。