在 Angular 组件中，无需创建独立子组件即可多次复用相同 HTML 模板（如按钮组），只需结合 ng-template 和 *ngTemplateOutlet 即可实现高效、声明式的模板复用。

在 angular 组件中，无需创建独立子组件即可多次复用相同 html 模板（如按钮组），只需结合 `ng-template` 和 `*ngtemplateoutlet` 即可实现高效、声明式的模板复用。

在 Angular 开发中，当需要在同一组件内多处渲染完全相同的 DOM 结构（例如一组功能按钮）时，最佳实践并非重复编写 HTML，也不是强制拆分为独立组件——而是利用 Angular 内置的模板引用与动态插入机制。

核心方案是：使用 定义可复用的模板片段，并通过 *ngTemplateOutlet 指令将其注入到任意目标容器中。

✅ 正确实现步骤

1. 定义模板片段：用 包裹共用内容，并赋予唯一模板引用变量（如 #myButton）：

   <ng-template><button>A1</button>
   <button>A2</button>
   <button>A3</button>
   </ng-template>

2. 多处复用模板：在目标

   内使用 插入该模板：

   <div class="D1">
   <ng-container></ng-container>
   </div>
   <div class="D2">
   <ng-container></ng-container>
   </div>

   ? 注意： 是逻辑容器，不产生实际 DOM 节点，完美适配样式隔离需求；*ngTemplateOutlet 是结构型指令，支持传参（如 *ngTemplateOutlet="myButton; context: myContext"），适用于更复杂场景。

   ⚠️ 常见误区提醒

   • ❌ 不要使用 *ngIf="true" 或
     模拟复用——破坏类型安全与变更检测。
   • ❌ 避免直接复制粘贴 HTML——违背 DRY 原则，增加维护成本。
   • ✅ ng-template 定义的内容默认不渲染，仅在被 ngTemplateOutlet 调用时激活，性能无额外开销。

   ✅ 进阶提示：支持上下文传参（可选）

   若按钮需响应不同作用域数据，可扩展为带上下文的模板：

   <ng-template let-title="title" let-action="action"><button>{{ title }}-Save</button>
     <button>{{ title }}-Cancel</button>
   </ng-template><div class="D1">
     <ng-container context: action: saveforma></ng-container>
   </div>
   <div class="D2">
     <ng-container context: action: saveformb></ng-container>
   </div>

   此方式兼顾简洁性与扩展性，是 Angular 模板复用的标准推荐方案。