javascript - 在 Angular 中渲染基于时间的 Observables 而无需压倒性的变化检测

Question

我们的 Angular 应用程序中有许多组件需要每秒定期显示每个组件唯一的新值(倒计时、时间戳、耗时等)。最自然的方法是创建使用 RxJS timer 和 interval 工厂函数的可观察对象。但是，这些会在整个应用程序的每个时间间隔触发 Angular 变化检测，调用时间间隔函数的次数。如果我们在页面上有几十个组件，这会触发整个应用程序每秒或每个时间段数十次的变化检测，从而产生很大的性能开销。

到目前为止，我尝试了两种方法来解决这个问题。对任何一个的好的回答都会非常有帮助——最好是两者兼而有之。我想避免手动触发变更检测，而是依赖于 Observables 发出的新值，并让异步管道/OnPush 变更检测策略负责触发变更检测。如果这不可能，我想了解原因。

1. 有什么方法可以禁用或阻止 RxJS timer 或 interval 函数触发 Angular 变化检测吗？使用 NgZone zone.runOutsideAngular(() => this.interval$ = interval(1000) ... ) 似乎不会执行此操作。 StackBlitz 示例:https://stackblitz.com/edit/angular-zo5h39
2. 或者，如果我使用 RxJS Subject 结合在 zone.runOutsideAngular 中调用的 setInterval 创建一个 Observable 流，为什么不改变当主题发出新值时触发子组件的检测？ StackBlitz 示例:https://stackblitz.com/edit/angular-yxdjgd

Answer 1

1. Is there any way to disable or prevent RxJS timer or interval functions from triggering Angular change detection? Using NgZonezone.runOutsideAngular(() => this.interval$ = interval(1000) ... )does not appear to do this.

这是因为可观察对象是冷的，并且值生成器 (setInterval) 仅在订阅发生时执行。阅读更多 here .虽然这段代码是在 Angular 区域之外执行的:

() => this.interval$ = interval(1000) ...

它实际上并没有立即调用 interval 运算符中的值生成器。稍后将在 IntervalInnerComponent 中的 AsyncPipe 订阅时调用。这发生在 Angular 区域内:

在下一个替代方案中使用主题，您可以将其设为热点并立即在 Angular 区域之外订阅。

2. Alternatively, if I create an Observable stream using an RxJS Subject combined with setInterval called inside zone.runOutsideAngular... setInterval values are being created (they can be subscribed tomanually), but the async pipe does not appear to be triggering changedetection

因为 Async Pipe 不会触发变更检测。它只是标记一个组件及其所有祖先，以便在接下来的更改检测期间随时进行检查。看这个answer或 this article更多细节。 Zone.js 触发变化检测。但是由于您在 Angular 区域之外运行 setInterval，它不会触发它。在此设置下，您有几个选项:

• 注入(inject) ChangeDetectorRef 并手动触发组件及其祖先的变更检测
• 注入(inject) ApplicationRef 并手动触发整个应用程序的变更检测