将上下文传递给ng-template，当它被本地引用使用时

Question

我有一个组件，看起来像这样:

<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>

我如何将每个项目作为上下文传递给我的ng-template?图书馆没有提供这样做的方法。(nzHeader只接受字符串和TemplateRef作为参数，不接受其他类型的视图)

Answer 1

解决这个问题的一种方法是完全绕过为模板提供上下文的需要。相反，让我们给一个组件一个Input()，因为这很容易。

让我们创建一个CollapseWrapperComponent,app-collapse-wrapper-component作为它的选择器。这是ts和html:

export class CollapseWrapperComponent {
@Input() public item: Item;
}

<nz-collapse-panel [nzHeader]="collapseHeader">
<ng-content></ng-content>
</nz-collapse-panel>
<ng-template #collapseHeader>
<nz-divider [nzText]="item.name"></nz-divider>
</ng-template>

然后在父组件的html中，我们现在可以在*ngFor中迭代该组件:

<nz-collapse>
<app-collapse-wrapper *ngFor="let item of items">
<div class="item">
<!-- some content here -->
</div>
</app-collapse-wrapper>
</nz-collapse>

现在我们基本上有一个<ng-template>对应一个item，所以不需要上下文。