Angular中如何为nzHeader绑定的ng-template传递item上下文？

我有如下组件代码：

<nz-collapse>
  <nz-collapse-panel *ngFor="let item of items" [nzHeader]="collapseHeader">
    <div class="item">
      <!-- some content here -->
    </div>
  </nz-collapse-panel>
</nz-collapse>

<ng-template #collapseHeader let-item>
  <nz-divider [nzText]="item.name"></nz-divider>
</ng-template>

希望将*ngFor循环中的每个item作为上下文传递给ng-template，但所用组件库不支持直接实现（nzHeader仅接受字符串和TemplateRef作为参数，不支持其他视图类型），请问该如何解决？

方法1：利用*ngTemplateOutlet传递上下文 #

这是最常用的方案，通过在每个面板的nzHeader模板内复用公共模板，并手动传递当前item作为上下文：

<nz-collapse>
  <nz-collapse-panel *ngFor="let item of items">
    <ng-template nzHeader>
      <!-- $implicit对应模板中的let-item，将当前item传入公共模板 -->
      <ng-container *ngTemplateOutlet="collapseHeader; context: { $implicit: item }"></ng-container>
    </ng-template>
    <div class="item">
      <!-- some content here -->
    </div>
  </nz-collapse-panel>
</nz-collapse>

<ng-template #collapseHeader let-item>
  <nz-divider [nzText]="item.name"></nz-divider>
</ng-template>

方法2：内联模板内容（适用于简单场景） #

如果模板内容不复杂且无需复用，直接把模板内容写到nzHeader的ng-template中即可：

<nz-collapse>
  <nz-collapse-panel *ngFor="let item of items">
    <ng-template nzHeader>
      <nz-divider [nzText]="item.name"></nz-divider>
    </ng-template>
    <div class="item">
      <!-- some content here -->
    </div>
  </nz-collapse-panel>
</nz-collapse>

方法3：自定义指令（适用于多场景复用） #

如果需要在多个组件中复用带上下文的模板逻辑，可以创建自定义指令：

import { Directive, Input, TemplateRef, ViewContainerRef, OnInit } from '@angular/core';

@Directive({
  selector: '[appHeaderWithContext]'
})
export class HeaderWithContextDirective implements OnInit {
  @Input() appHeaderWithContext: any;
  @Input() appHeaderWithContextTemplate!: TemplateRef<any>;

  constructor(
    private viewContainerRef: ViewContainerRef
  ) {}

  ngOnInit(): void {
    this.viewContainerRef.createEmbeddedView(
      this.appHeaderWithContextTemplate,
      { $implicit: this.appHeaderWithContext }
    );
  }
}

使用方式：

<nz-collapse>
  <nz-collapse-panel *ngFor="let item of items">
    <ng-template nzHeader>
      <ng-container 
        [appHeaderWithContext]="item" 
        [appHeaderWithContextTemplate]="collapseHeader"
      ></ng-container>
    </ng-template>
    <div class="item">
      <!-- some content here -->
    </div>
  </nz-collapse-panel>
</nz-collapse>

<ng-template #collapseHeader let-item>
  <nz-divider [nzText]="item.name"></nz-divider>
</ng-template>

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