Angular模板渲染起止时机及生命周期钩子表现疑问

你遇到的现象本质是Angular组件生命周期钩子与模板渲染阶段的对应关系问题，以下是准确的时机说明：

模板渲染的起始阶段 #

组件构造函数执行完毕后，Angular立即开始解析组件模板，同步创建对应的DOM元素节点。这就是为什么你在ngOnInit里能通过document.querySelector('.hey')获取到元素——此时元素已经被创建并加入DOM树，但数据绑定还未执行，元素的内容（比如innerText）还没被填充。

ngOnInit的触发时机 #

ngOnInit在组件输入属性绑定完成后触发，但此时模板的渲染流程还未完成：

• DOM元素已存在，但依赖组件属性的模板内容（比如插值表达式{{name}}）还没被解析和渲染
• 所以你能拿到元素本身，但innerText是空字符串

模板渲染的结束节点 #

当Angular完成所有数据绑定、视图内容渲染（包括所有子组件的视图初始化与渲染）后，会触发ngAfterViewInit钩子。此时：

• 模板里的插值、指令绑定都已完成
• DOM元素的内容完全渲染完毕，能够正常获取到innerText这类渲染后的内容

结合你的代码来看：组件的name="Balbazar"会在ngAfterViewInit触发前完成与模板的绑定，所以此时.hey元素的innerText才会被填充为对应的值。

内容的提问来源于stack exchange，提问作者seniorlearner