angular - 在 ngOnChanges 中触发角度变化检测（因此重新启动 css 动画）

Question

假设我有一个非常基本的组件，它将一个数字作为输入并呈现它（例如股票价格值）。当该数字从之前的值增加或减少时，动画应该显示 10 秒然后消失。如果输入值在这 10 秒内发生变化，动画应该重新启动，并在 10 秒后隐藏（或者如果值再次变化，则重新启动，等等）。

我已经使用基本的 css 关键帧动画为我的用例实现了这个。也许这是错误的方法，但它比必须掌握角度动画库更容易。

我已经设置了强制性的 stackblitz 示例来说明我的问题。如果单击递增或递减按钮，请等待弹跳停止，然后再次单击该按钮，动画不会重新开始。

我已经通过setTimeout(() => {...}, 100)在将动画更改“恢复为真”（hello.component.ts 的第 26-33 行）时使用 a 解决了这个问题，但这显然不是执行此操作的角度方式。

任何指导将不胜感激。

编辑：忘记 stackblitz 链接：https ://stackblitz.com/edit/angular-u9ogwv

标签： angularanimationangular2-changedetectionangular-changedetection