Angular 检测组件的 DOM 何时完成渲染答案

【问题标题】：Angular detect when the DOM of a component finished renderingAngular 检测组件的 DOM 何时完成渲染
【发布时间】：2021-02-19 10:06:42
【问题描述】：

我已经搜索了很长时间，但我无法找到一个好的解决方案。一旦组件的 DOM 完成渲染，我必须触发一个函数/事件。我需要访问组件的高度，因此 ngAfterViewInit 不起作用，因为它是在渲染 DOM 之前调用的。我尝试了 ngAfterViewChecked，但这会被多次调用。由于被执行的函数是包装应用程序的一部分，我也无权访问它，我绝对需要确保它只被触发一次。我正在考虑将 ngAfterViewChecked 与某种去抖动一起使用，但这感觉（并且可能是）错误的。另一种方法是在 ngFor 循环到达最后一项时从模板触发一个函数。但同样，这感觉不对。

感谢任何意见

【问题讨论】：

快速解决方案是settimeout，获取此事件循环后的DOM元素。
这能回答你的问题吗？ How to call function after dom renders in Angular2?
你能举个例子吗？
啊，对不起，我忘了提这个。出于某种原因， setTimeout 也被调用得太早了。 @tommueller 不，很遗憾不是。我必须检查页面是否可以向下或向上滚动。它们的默认值为 false，如果内容合适，它们都将保持为 false。考虑到我正在开发一个被另一个应用程序包装的应用程序，提供一个示例有点困难。归根结底，我的 Angular 应用程序将位于 iframe 中，当任何路由完成渲染时，我必须将事件传递给父级。
@LiHao 那将是解决这个问题的最糟糕的方法。

标签： javascript angular typescript rxjs

【解决方案1】：

我通过使用 ngAfterViewChecked 解决了这个问题。在每次检查时，我都会得到组件主体的 scrollHeight。在渲染之前，它将为 0，因此检查 scrollHeight 属性是否发生变化，适用于我的用例。

感谢所有 cmets，这实际上让我想到了这个解决方案

【讨论】：