Angular 生命周期钩子和渲染组件

Question

考虑以下 html：

<html>
<body>
<app-header></app-header>
<app-footer></app-footer>
</body>
</html>

如果我对 append 使用app-footer钩子ngAfterViewInit()到 html 的脚本，其中包含jQuery处理app-header组件中的元素，将工作吗？

与app-footer挂钩相比，何时执行app-header挂钩ngAfterViewInit() ？
会先执行吗？ 异步？

Answer 1

首先，我认为尝试依赖于多个组件中生命周期方法的执行顺序和时间是不明智的，因为这种顺序和时间是没有保证的。

即使您在您的开发环境中使用它，它也不可能在其他客户端、所有浏览器以及未来版本的 Angular 上完全以这种方式工作。

简单地依赖父组件的 afterViewInit 生命周期方法会更安全，在此期间可以保证两个子组件将被初始化。

其次，我认为一般建议不要直接访问 DOM，而是通过 Renderer 来访问。 使用 jQuery 违反了该建议。 您可能应该寻找一种特定于 Angular 的方法来做您需要的事情，而不是使用 jQuery。