ngTemplateOutlet工作原理、currentView指代及使用调整方法

你看到的代码来自Angular行内编辑组件的实现，currentView 是组件类中定义的**TemplateRef类型属性**，用于存储当前需要渲染的模板引用：
组件内部会维护编辑/只读两种状态，状态切换时会给currentView分别赋值对应的模板实例：

• 只读状态时指向展示数据的模板
• 编辑状态时指向带输入框的编辑模板
  ngTemplateOutlet 会根据currentView的值动态渲染对应视图，实现行内编辑的切换效果。

ngTemplateOutlet 是Angular内置的结构型指令，作用是动态渲染提前定义好的<ng-template>模板，核心逻辑如下：

• 你通过<ng-template #xxx>定义的模板默认不会主动渲染，Angular会为每个带模板引用变量的<ng-template>生成一个TemplateRef实例，存在组件实例中
• 指令接收TemplateRef类型的入参，会将入参对应的模板内容渲染到当前<ng-container>所在的DOM位置
• 支持传入自定义上下文给模板，实现模板和数据的解耦：可以给不同的复用模板传入不同的业务数据，不用重复写模板代码

按照以下步骤配置即可正常使用：

• 首先在组件模板中定义需要动态渲染的所有<ng-template>，给每个模板设置唯一的模板引用变量：

<!-- 展示态模板 -->
<ng-template #viewTpl let-row="rowData">
  <span>{{row.name}}</span>
  <button (click)="toggleEdit(true)">编辑</button>
</ng-template>

<!-- 编辑态模板 -->
<ng-template #editTpl let-row="rowData" let-save="saveHandle">
  <input type="text" [(ngModel)]="row.name">
  <button (click)="save(row); toggleEdit(false)">保存</button>
</ng-template>

• 在组件类中通过@ViewChild获取上面两个模板的TemplateRef实例，同时定义状态切换用的变量：

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

@Component({
  // 你的组件基础配置
})
export class YourEditableComponent {
  isEditing = false;
  currentView!: TemplateRef<any>;
  // 行数据可根据你的业务逻辑传入
  currentRow = { name: '测试数据' };

  @ViewChild('viewTpl') viewTpl!: TemplateRef<any>;
  @ViewChild('editTpl') editTpl!: TemplateRef<any>;

  ngAfterViewInit() {
    // 初始化默认渲染展示态
    this.currentView = this.viewTpl;
  }

  toggleEdit(status: boolean) {
    this.isEditing = status;
    // 状态切换时修改currentView指向
    this.currentView = this.isEditing ? this.editTpl : this.viewTpl;
  }

  saveHandle = (row: any) => {
    // 你的保存逻辑
    console.log('保存数据', row);
  }
}

• 在需要动态渲染的位置插入ngTemplateOutlet的占位代码，同时传入需要的上下文参数：

<ng-container 
  *ngTemplateOutlet="currentView; context: { rowData: currentRow, saveHandle: saveHandle }"
></ng-container>

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