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

【问题标题】：angular - how to detect browser has finished RErendering after change角度 - 如何检测浏览器在更改后完成重新渲染
【发布时间】：2020-11-05 14:35:29
【问题描述】：

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

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

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

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

更新

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

这是更新的 Stackblitz。

【问题讨论】：

【解决方案1】：

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

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

【讨论】：

感谢您的回复，但我认为这还不够……如果您检查控制台日志，您可以看到该函数在 20 毫秒后完成，而视图明显滞后。跨度>
更新了 StackBlitz 并在 appliedOrder @Output 绑定发出时调用的回调中添加了 debugger 语句。因此，如果您在 Chrome 或 Firefox 上打开 DevTools 并单击切换按钮，您将点击断点并注意到所有更新的订单样式都已呈现并且可见。我还添加了一个额外的 console.log 来显示正在应用的订单样式立即可见：我在应用订单样式之前和之后输出第一个孩子呈现的 X 位置。
您有什么不清楚的地方吗？如果没有，您可以考虑接受答案吗？
抱歉，您的回答没有回答我的问题，因为我想知道 DOM 何时完成呈现更改。如果将浏览器性能限制为 6 倍，您会注意到在视口中发生任何更改之前所有事件都会记录下来。同时我做了一些研究并更新了我的问题。