angular - 角度 - 如何检测浏览器在更改后完成重新渲染

Question

我有一个基于网格的表格，其中“订单”应用于每个项目以允许动态排序。

当触发网格顺序更改时，我想要一个事件告诉我浏览器已完成重新渲染整个网格。

我已经尝试过 ngAfterViewChecked，但是如果我有例如 1000 个网格项目，这似乎有点太早了。

我在这里有一个 stackblitz 演示。或者，也可以使用本机 javascript 解决方案。

https://stackblitz.com/edit/angular-ivy-yhfudq?file=src%2Fapp%2Ftable.directive.ts

更新

我发现了 2 个其他来源，它们更接近于检测何时发生更改，而不是当更改实际完成渲染时。如果您将浏览器 CPU 性能限制为 6 倍，则在您看到浏览器中的任何更改之前仍会记录事件。

1. 使用 Angular 的NgZone onStable事件。

2. 使用MutationObserver

这是更新的 Stackblitz。

https://stackblitz.com/edit/angular-ivy-bh5szc?file=src/app/table.directive.ts

标签： angularbrowsergridhtml-rendering

Answer 1

当您通过使用 直接应用所有更改时Renderer2，所有更改都应该在从#applyOrder(). 这是由浏览器同步完成的。

如果您希望在完成渲染时通知一个显式事件，您可以添加一个@Output()声明。请参阅https://stackblitz.com/edit/angular-ivy-julues?file=src/app/table.directive.ts以供参考。