javascript - 为什么 Angular 组件的实例化顺序与 if 条件下的预期顺序不符？

Question

我在文档中找不到任何地方，为什么 Angular 组件的实例化顺序与 if 条件的预期顺序不符？我期望它的顺序也与控制台中写入的顺序相同。即 1 2 3 4 5 (HTML 方面这是正确的) 但它是 3 4 5 1 2

虽然我在观察到这种行为后做出了假设，即 if 条件与没有它的情况相比会延迟执行，但找不到原因/文档。

用于验证此行为的 Slackblitz 链接: https://stackblitz.com/edit/angular-looping-data-sbnayy?file=app%2Fapp.component.html

Answer 1

全部structural directives这样做是因为它们基于 <ng-template>

这个:

<hello name="1" *ngIf="true"></hello>

只是简化的语法

<ng-template [ngIf]="true">
    <hello name="1"></hello>
</ng-template>

<ng-template>在没有指示的情况下不会被渲染。

您的情况到底发生了什么:

1. app.component 已创建并通过 OnInit => DoCheck => AfterContentInit => AfterContentChecked 生命周期 Hook 实现。

2. hello.component是app.component的内容(子级)，它们应该被初始化，但在幕后 *ngIf 将“hello1”和“hello2”包装到<ng-template>中。请记住这一点。

3. 现在，app.component 的子级将经历相同的生命周期 Hook (OnInit 到 AfterContentChecked)。 Angular 不插入<ng-template>进入 DOM 但占位符(您可以在文档树中看到它作为注释):

   <!--绑定(bind)={ “ng-reflect-ng-if”:“真” }-->

4. 然后“hello3”、“hello4”和“hello5”被初始化，插入到DOM中并执行console.log(this.name)

5. ngIf 指令和 hello.components(3 到 5)初始化它们自己的内容的时间。此时，hello.components(1 和 2)在各自的 ngIf 指令中进行初始化，在占位符之后插入到 DOM 中，并执行 console.log (this.name)

6. 然后 AfterViewInit => AfterViewChecked 从树中最深处的子级中钩住气泡，您将看到渲染的页面