在Angular中如何实现nzDropDownMenu模板引用的可复用性？

提供两种可落地的实现方式，可根据项目实际场景选择：

方案1：使用ngTemplateOutlet实现单页面模板复用 #

适合仅在当前页面有大量重复表头的场景，无需新增组件：

1. 先在当前页面模板顶部定义公共可复用模板，通过上下文传递动态参数：

<!-- 公共下拉菜单模板 -->
<ng-template #deptDropDownTpl let-field="field">
  <nz-dropdown-menu #menuRef="nzDropdownMenu">
    <app-drop-down-num
      *ngIf="userData"
      [isEmployment]="true"
      [fields]="field"
      [listOfDisplayData]="userData"
      (Reload)="Reload($event)"
      (ParentComponet)="ParentComponent($event)"
    ></app-drop-down-num>
  </nz-dropdown-menu>
</ng-template>

2. 在组件ts文件中定义科室配置列表，后续新增科室只需在数组中追加配置即可：

// 组件类中定义配置
deptList = [
  { label: '心内科', field: 'cardiology' },
  { label: '皮肤科', field: 'dermatology' },
  { label: '男科', field: 'andrology' },
  // 其他科室直接加配置项
]

3. 循环渲染表头，动态实例化公共模板：

<th *ngFor="let dept of deptList" nzCustomFilter>
  {{ dept.label }}
  <ng-container *ngTemplateOutlet="deptDropDownTpl; context: {field: dept.field}"></ng-container>
  <nz-filter-trigger
    [nzActive]="searchValue.length > 0"
    [nzDropdownMenu]="menuRef"
  >
    <i nz-icon nzType="search"></i>
  </nz-filter-trigger>
</th>

方案2：封装独立表头组件（推荐） #

适合多页面都需要用到该筛选表头的场景，维护性更高：

1. 新增自定义组件dept-filter-header，在组件类中定义输入输出参数：

// dept-filter-header.component.ts
import { Component, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-dept-filter-header',
  templateUrl: './dept-filter-header.component.html'
})
export class DeptFilterHeaderComponent {
  @Input() deptLabel: string;
  @Input() deptField: string;
  @Input() userData: any[];
  @Input() searchValue: string = '';
  @Output() Reload = new EventEmitter<any>();
  @Output() ParentComponet = new EventEmitter<any>();
}

2. 组件模板内容如下：

<!-- dept-filter-header.component.html -->
<th nzCustomFilter>
  {{ deptLabel }}
  <nz-dropdown-menu #menuRef="nzDropdownMenu">
    <app-drop-down-num
      *ngIf="userData"
      [isEmployment]="true"
      [fields]="deptField"
      [listOfDisplayData]="userData"
      (Reload)="Reload.emit($event)"
      (ParentComponet)="ParentComponet.emit($event)"
    ></app-drop-down-num>
  </nz-dropdown-menu>
  <nz-filter-trigger
    [nzActive]="searchValue.length > 0"
    [nzDropdownMenu]="menuRef"
  >
    <i nz-icon nzType="search"></i>
  </nz-filter-trigger>
</th>

3. 父页面直接调用组件即可，新增科室仅需加一行代码：

<app-dept-filter-header
  deptLabel="心内科"
  deptField="cardiology"
  [userData]="userData"
  [searchValue]="searchValue"
  (Reload)="Reload($event)"
  (ParentComponet)="ParentComponent($event)"
></app-dept-filter-header>

<app-dept-filter-header
  deptLabel="皮肤科"
  deptField="dermatology"
  [userData]="userData"
  [searchValue]="searchValue"
  (Reload)="Reload($event)"
  (ParentComponet)="ParentComponent($event)"
></app-dept-filter-header>

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