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

Question

考虑以下 html：

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

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

与app-footer钩子相比，app-header钩子ngAfterViewInit()什么时候执行？
会先执行吗？异步？

Answer 1

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

即使您在您的开发环境中让它工作，它也不太可能在其他客户端、所有浏览器以及 Angular 的未来版本中以同样的方式工作。

单纯依赖父组件的afterViewInit生命周期方法会安全很多，期间保证两个子组件都已经初始化

其次，我认为通常建议不要直接访问 DOM，而是通过渲染器访问。使用 jQuery 违反了该建议。您可能应该寻找一种 Angular 特定的方式来完成您需要的事情，而不是使用 jQuery.

Angular lifecycle hooks and rendering components