Angular 管道变化检测

Question

我对变更检测和管道有疑问。我找不到解决它的好方法。

我创建了一个小项目来重现它here。转到 /monitor 路线。

当您单击“更改”按钮时，它会更改数组中第一项的值，但 UI 不会更新。

如果我使用

在更改处理程序中重新创建另一个对象，它会起作用

this.state[0] = Object.assign({}, this.state[0], { value: 999.99 });

但我不想那样做。我需要保留相同的对象引用。

问题来自 vital-value.component.html

中的管道

{{ _vitalValue | vitalFormat }}

如果我改用就可以了

{{ _vitalValue.value }}

有没有办法在保留管道的同时进行刷新？

谢谢！

Answer 1

尽管不推荐这样做，但请尝试使管道变得不纯净。

@Pipe({
  name: 'vitalFormat',
  pure: false
})

但要注意对应用程序性能的影响。不建议使用 impure 管道。

阅读此处：

Angular executes an impure pipe during every component change detection cycle. An impure pipe is called often, as often as every keystroke or mouse-move.

With that concern in mind, implement an impure pipe with great care. An expensive, long-running pipe could destroy the user experience.

Angular 管道变化检测

Angular change detection with pipe

angular2-changedetection

angular-pipe

angular