在 Angular 组件中，无需创建独立子组件即可多次复用相同 HTML 模板（如按钮组），只需结合 ng-template 和 *ngTemplateOutlet 即可实现高效、声明式的模板复用。
在 angular 组件中，无需创建独立子组件即可多次复用相同 html 模板（如按钮组），只需结合 `ng-template` 和 `*ngtemplateoutlet` 即可实现高效、声明式的模板复用。
在 Angular 开发中，当需要在同一组件内多处渲染完全相同的 DOM 结构（例如一组功能按钮）时，最佳实践并非重复编写 HTML，也不是强制拆分为独立组件——而是利用 Angular 内置的模板引用与动态插入机制。
核心方案是：使用 <ng-template> 定义可复用的模板片段，并通过 *ngTemplateOutlet 指令将其注入到任意目标容器中。
✅ 正确实现步骤
-
定义模板片段：用 <ng-template #templateRef> 包裹共用内容，并赋予唯一模板引用变量（如 #myButton）：
<ng-template #myButton> <button>A1</button> <button>A2</button> <button>A3</button> </ng-template>
-
多处复用模板：在目标 <div> 内使用 <ng-container *ngTemplateOutlet="myButton"> 插入该模板：
<div class="D1"> <ng-container *ngTemplateOutlet="myButton"></ng-container> </div> <div class="D2"> <ng-container *ngTemplateOutlet="myButton"></ng-container> </div>
? 注意：<ng-container> 是逻辑容器，不产生实际 DOM 节点，完美适配样式隔离需求；*ngTemplateOutlet 是结构型指令，支持传参（如 *ngTemplateOutlet="myButton; context: myContext"），适用于更复杂场景。
⚠️ 常见误区提醒
- ❌ 不要使用 *ngIf="true" 或 <div [innerHTML]="..."> 模拟复用——破坏类型安全与变更检测。
- ❌ 避免直接复制粘贴 HTML——违背 DRY 原则，增加维护成本。
- ✅ ng-template 定义的内容默认不渲染，仅在被 ngTemplateOutlet 调用时激活，性能无额外开销。
✅ 进阶提示：支持上下文传参（可选）
若按钮需响应不同作用域数据，可扩展为带上下文的模板：
<ng-template #actionButtons let-title="title" let-action="action">
<button (click)="action()">{{ title }}-Save</button>
<button (click)="cancel()">{{ title }}-Cancel</button>
</ng-template>
<div class="D1">
<ng-container *ngTemplateOutlet="actionButtons; context: {title: 'FormA', action: saveFormA}"></ng-container>
</div>
<div class="D2">
<ng-container *ngTemplateOutlet="actionButtons; context: {title: 'FormB', action: saveFormB}"></ng-container>
</div>此方式兼顾简洁性与扩展性，是 Angular 模板复用的标准推荐方案。
