Angular 生命周期钩子和渲染组件
Posted
技术标签:
【中文标题】Angular 生命周期钩子和渲染组件【英文标题】：Angular lifecycle hooks and rendering components 【发布时间】：2020-03-15 14:10:14 【问题描述】：考虑以下 html：
<html>
<body>
<app-header></app-header>
<app-footer></app-footer>
</body>
</html>
如果我使用app-footer 钩子ngAfterViewInit() 将脚本附加到包含处理app-header 组件中元素的jQuery 的html，会起作用吗？
与app-footer 挂钩相比，app-header 挂钩 ngAfterViewInit() 何时执行？
会先执行吗？异步？
【问题讨论】：
只是想知道，为什么？这听起来像是 XY 类型的问题 我在玩 Angular，我选择的其中一个主题使用了一个 jQuery 插件，它的功能与我描述的类似。但我的主要目标是了解生命周期挂钩何时执行，与其他组件相比。 为什么不尝试在两者中放置 console.log() 并查看它们触发的顺序？ 【参考方案1】：首先，我认为尝试依赖于多个组件中生命周期方法的执行顺序和时间是不明智的，因为这种顺序和时间无法保证。
即使您在自己的开发环境中实现了该功能，也不太可能在其他客户端、所有浏览器以及 Angular 的未来版本中完全以这种方式工作。
简单地依赖父组件的 afterViewInit 生命周期方法会更安全，在此期间可以保证两个子组件都会被初始化。
其次，我认为一般建议不要直接访问 DOM，而是通过 Renderer 来访问。使用 jQuery 违反了该建议。您可能应该寻找一种特定于 Angular 的方式来做您需要的事情，而不是使用 jQuery。
【讨论】：
第三段为我关闭了它，我还没有想过使用父组件的钩子。而且我确实在尝试不同的 Angular 特定替代方案。以上是关于Angular 生命周期钩子和渲染组件的主要内容，如果未能解决你的问题，请参考以下文章