Angular项目中子组件如何复用父组件的ng-template？

这问题我刚好处理过，在Angular里要复用父组件的ng-template其实很简单，核心就是通过**输入属性（@Input）**把父组件的模板引用传递给子组件，具体步骤如下：

1. 在子组件中定义接收模板的输入属性 #

首先在子组件的TS文件中，导入TemplateRef并定义一个输入属性，用来接收父组件传来的模板引用：

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

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css']
})
export class ChildComponent {
  // 定义输入属性，接收父组件的模板
  @Input() attachmentTemplate!: TemplateRef<any>;
}

2. 在父组件中把目标模板绑定到子组件的输入属性 #

在父组件的HTML模板中，将你要复用的attachmentTemplate通过属性绑定传递给子组件：

<!-- parent.component.html -->
<!-- 定义要复用的模板 -->
<ng-template #attachmentTemplate let-typeId="typeId">
  <div>Attachments</div>
  <p>Type ID: {{typeId}}</p>
</ng-template>

<!-- 父组件自身使用模板 -->
<ng-container *ngTemplateOutlet="attachmentTemplate; context:{typeId: '2'}"></ng-container>

<!-- 将模板传递给子组件 -->
<app-child [attachmentTemplate]="attachmentTemplate"></app-child>

3. 在子组件模板中渲染传入的模板 #

最后在子组件的HTML里，用*ngTemplateOutlet渲染父组件传来的模板，还可以自定义上下文参数：

<!-- child.component.html -->
<!-- 使用父组件传来的模板，可自定义context数据 -->
<ng-container *ngTemplateOutlet="attachmentTemplate; context:{typeId: '3'}"></ng-container>

这样一来，子组件就能完全复用父组件的attachmentTemplate模板结构，不需要重复编写附件相关代码。如果需要不同的业务数据，只需要在context里传递对应参数即可，比如例子中父组件传typeId='2'，子组件传typeId='3'，各自渲染对应内容。

如果模板依赖父组件的方法或变量，你还可以把这些依赖项也通过@Input传递给子组件，确保模板逻辑正常运行。

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