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