带迭代的角度内容投影

Answer 1

您可以将标签作为模板传递，然后在组件内重用该模板。在组件中添加一个名为 labelTemplate 的新输入，并传递一个 TemplateRef。然后在视图中，您可以像任何模板一样引用它 - 我假设您希望将其嵌套在示例中提供的模板中，但没有理由它不能位于主 for 循环块中。

export class MyComponentComponent {
  /** The template used to display the label */
  @Input() labelTemplate?: TemplateRef<{ $implicit: unknown }>;
}

<ng-template #tmpContent let-item="item">
  <div>
    {{item.id}}
    <ng-template *ngTemplateOutlet="labelTemplate; context: {$implicit: item.name }" />
  </div>
</ng-template>

在使用组件的 html 模板中，在组件内的某个位置添加一个模板 - 它不必被投影。对模板的引用将传递给 labelTemplate property 属性。

<my-component dataProvider='source' [labelTemplate]="label">
  <ng-template #label let-content>
    <ion-label> test </ion-label>
  </ng-template>
</my-component>