Angular使用ngTemplateOutlet触发NG0100表达式变更检测错误求助

NG0100错误是Angular开发模式下的双重变更检测机制导致的：

1. 父组件的@ContentChildren会在AfterContentInit生命周期阶段初始化，获取到子组件实例。
2. 子组件的@ViewChild(TemplateRef)要等到AfterViewInit阶段才能拿到模板引用，这个阶段晚于父组件的AfterContentInit。
3. 第一次变更检测时，child.template还是undefined；子组件完成视图初始化后，template被赋值为有效引用，此时表达式child.template的值发生了变化，触发了Angular的变更检测校验，抛出NG0100错误。

方法一：利用生命周期钩子手动触发变更检测 #

在父组件中实现AfterContentInit和AfterViewInit，在子组件视图初始化完成后手动触发变更检测，让Angular认可这个值的变化：

import { Component, ContentChildren, QueryList, AfterContentInit, AfterViewInit, ChangeDetectorRef } from '@angular/core';
import { ChildComponent } from './child.component';

@Component({
  selector: 'app-parent',
  templateUrl: 'parent.component.html',
  styleUrls: ['parent.component.scss'],
  imports: [NgForOf, NgTemplateOutlet, NgIf],
  standalone: true
})
export class ParentComponent implements AfterContentInit, AfterViewInit {

  @ContentChildren(ChildComponent)
  public children!: QueryList<ChildComponent>;

  constructor(private cdr: ChangeDetectorRef) {}

  ngAfterContentInit(): void {
    // 监听子组件列表变化，确保新增子组件也能触发检测
    this.children.changes.subscribe(() => {
      this.cdr.detectChanges();
    });
  }

  ngAfterViewInit(): void {
    // 子组件视图初始化完成后，手动触发变更检测
    this.cdr.detectChanges();
  }
}

方法二：模板中判断模板存在后再渲染 #

通过*ngIf="child.template"判断子组件的模板是否已初始化，避免在值为undefined时渲染NgTemplateOutlet：

<ng-container *ngIf="children">
  <div *ngFor="let child of children">
    <ng-container *ngIf="child.template">
      <ng-container *ngTemplateOutlet="child.template" />
    </ng-container>
  </div>
</ng-container>

这种方法会在子组件模板初始化完成后才渲染内容，避免了表达式值在变更检测周期内的变化。

方法三：子组件内联模板提前初始化引用 #

修改子组件使用内联模板，让ViewChild的初始化时机提前，避免生命周期时序问题：

子组件源码 #

import { Component, TemplateRef, ViewChild } from '@angular/core';

@Component({
  selector: 'app-child',
  template: `<ng-template #childTemplate>
    <ng-content />
  </ng-template>`,
  standalone: true
})
export class ChildComponent {
  @ViewChild('childTemplate')
  public template!: TemplateRef<any>;
}

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