Angular：如何在同一组件的多个容器中复用通用模板

咱们可以用Angular内置的ng-template和ngTemplateOutlet指令实现当前组件内的模板复用，不用抽离成独立组件，所有按钮代码都能保留在当前组件里，具体操作如下：

1. 定义可复用的按钮模板 #

把按钮组包裹在ng-template标签里，给它加个模板引用变量（比如#buttonGroup），方便后续直接引用：

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

2. 在目标容器中渲染模板 #

在类名为D1和D2的两个div里，用ng-container配合*ngTemplateOutlet指令，把刚才定义的模板渲染进去：

<div class="D1">
    <ng-container *ngTemplateOutlet="buttonGroup"></ng-container>
</div>

<div class="D2">
    <ng-container *ngTemplateOutlet="buttonGroup"></ng-container>
</div>

这样两个容器里就会展示完全相同的按钮组，之后要修改按钮样式或功能，只需要改一处模板代码，两处都会同步更新。

进阶：给模板传递上下文参数 #

如果需要给不同容器的按钮传递不同参数（比如不同前缀文本、绑定不同点击事件），还能通过ngTemplateOutletContext实现，举个例子：

<ng-template #buttonGroup let-btnPrefix="prefix" let-onClick="clickHandler">
    <button (click)="onClick()">{{btnPrefix}}1</button>
    <button (click)="onClick()">{{btnPrefix}}2</button>
    <button (click)="onClick()">{{btnPrefix}}3</button>
</ng-template>

<div class="D1">
    <ng-container *ngTemplateOutlet="buttonGroup; context: {prefix: 'A', clickHandler: handleD1Click}"></ng-container>
</div>

<div class="D2">
    <ng-container *ngTemplateOutlet="buttonGroup; context: {prefix: 'B', clickHandler: handleD2Click}"></ng-container>
</div>

对应的组件类里定义两个点击方法：

handleD1Click() {
    console.log("D1区域的按钮被点击");
}

handleD2Click() {
    console.log("D2区域的按钮被点击");
}

这种方式既保持了模板复用，又能灵活适配不同容器的需求。

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