Angular 为 ngFor 中的每个元素调用 ngAfterContentInit答案

【问题标题】：Angular calls ngAfterContentInit for each element in ngForAngular 为 ngFor 中的每个元素调用 ngAfterContentInit
【发布时间】：2021-02-26 22:43:06
【问题描述】：

我的 Angular 11 (Ioinc 5) 应用程序有 2 个组件：ContainerComponent 和 BoxComponent。两个组件都是完全半透明的 (template: '<ng-content></ng-content>') 容器组件需要跟踪第三个组件放入其中的盒子组件的数量。当第三个组件使用 *ngFor 将盒子放入容器时，我的解决方案失败（下面的选项 B）

container.component.ts

import { Component, ContentChildren, QueryList, AfterContentInit } from '@angular/core';
import { BoxComponent } from './box.component';


@Component({
  selector: 'container',
  template: '<ng-content></ng-content>',
  styleUrls: ['container.component.scss'],
})
export class ContainerComponent implements AfterContentInit {
  // track the number of boxes
  private count: number = 0;

  @ContentChildren(BoxComponent)
  private boxes!: QueryList<BoxComponent>;
  
  ngAfterContentInit(): void {
    this.count++;
    console.log(count);  // Result see below
  }
}

第三个组件将n BoxComponents 放入ContainerComponent。

选项 A：n 个框硬编码到第三个组件的模板中

<container>
    <box>Box 1</box>
    <box>Box 2</box>
    // ...
    <box>Box n</box>
</container>

选项 B：使用 *ngFor 指令将 n 个框添加到第三个组件的模板中

<container *ngFor="let box of boxes">
    <box>{{box.label}}</box>
</container>

选项 A 和选项 B 的区别

使用选项 A 时，Angular 只调用一次ngAfterContentInit，结果为

count = n

使用选项 B 时，Angular 调用 ngAfterContentInit n 次，count 始终为 1。

count = 1, 1, ..., 1    // n times

我觉得这种行为很奇怪，因为这意味着 Angular 会为每个 BoxComponent 创建一个 ContainerComponent 的新实例。

【问题讨论】：

标签： angular typescript

【解决方案1】：

我相信这是正确的行为。 ngFor 指令将遍历 boxes 列表，为每个元素创建一个注入组件的实例。

如果你把 ngFor 放在 box 组件中，也许你期望的行为会实现：

<container>
  <box *ngFor="let box of boxes">{{box.label}}</box>
</container>

干杯！

【讨论】：