Angular中ng-template内ng-content包裹组件未渲染仍初始化问题

Angular 中ng-content的内容实例化时机由内容所属的上下文决定：你嵌套在外层组件标签内的内层组件，属于外层组件的父级调用上下文，会在外层组件自身初始化的阶段就完成实例化，和ng-content被放置的位置无关——哪怕你把ng-content放在ng-template这种懒渲染容器中，也只是控制「要不要把已经实例化的组件内容挂载到DOM上」，不会影响内层组件本身的实例化生命周期，所以才会出现组件没渲染但OnInit仍执行的情况。

如果需要由外层组件完全控制内层组件的初始化+渲染时机，不要直接用ng-content投影内层组件，改为传递TemplateRef模板给外层组件，由外层通过ngTemplateOutlet按需渲染模板即可，调整方式如下：

1. 外层组件新增输入属性接收模板

// outer.component.ts
import { Input, TemplateRef } from '@angular/core';

// 类内部新增
@Input() contentTpl: TemplateRef<any>;
// 新增控制渲染时机的变量，可根据业务逻辑修改
shouldRender = false;

2. 外层组件模板调整为按需渲染模板

<!-- outer.component.html -->
<ng-container *ngIf="shouldRender">
  <ng-template [ngTemplateOutlet]="contentTpl"></ng-template>
</ng-container>

3. 调用外层组件时，把内层组件包裹在ng-template中传递

<!-- 父级调用外层组件的位置 -->
<app-outer [contentTpl]="innerContent">
  <ng-template #innerContent>
    <app-inner></app-inner>
  </ng-template>
</app-outer>

调整后内层组件只会在shouldRender为true、模板被实际渲染时才会完成实例化，OnInit等生命周期也只会在此时触发，完全由外层组件控制生命周期时机。

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