javascript - ElementRef 在组件构造函数中可用时的状态是什么

Question

我可以在组件构造函数中访问 ElementRef:

export class MyComponent {
    constructor(element: ElementRef) {
       element.nativeElement

这个 DOM 元素的状态是什么:

1) 就 DOM 而言 - 它是否已经放入 DOM 中？它被渲染了吗？是否创建并附加了子组件 DOM 元素？

2) 就子组件生命周期而言 - 子组件经历了哪些阶段 - onInit、afterContentInit 等？

Answer 1

在内部，每个 Angular 组件都表示为一个元素和一个指令。您可以在 Here is why you will not find components inside Angular 中阅读更多相关信息.

您可以注入(inject)到构造函数中的 elementRef 实际上是用于承载组件的元素。现在回答您的问题。

1) in terms of DOM - is it put in the DOM already? Is it rendered? Are it's child components DOM elements created and appended?

是的，它被创建并附加到父 DOM 元素。它尚未呈现为同步引导组件的过程，因此浏览器没有机会重新绘制。不，它的子组件还没有创建。

2) in terms of child components lifecycle - what stages have child components gone through - onInit, afterContentInit etc.?

所有生命周期 Hook 都是变更检测的一部分。在 Everything you need to know about change detection in Angular 中阅读更多内容.组件树是在变更检测之前创建的。因此，此组件没有触发任何生命周期 Hook ，并且正如我上面所说，尚未创建任何子组件。