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

Angular2 directive is not responding to async data