angular - 如何定义一个需要在一个位置进入多个 ngFor 循环以便不重复代码的 Angular 模板？

Question

我有一个带有模板的组件的角度应用程序。该组件进入页面上的几个位置，每个位置都在循环中重复该组件。在一个地方，它位于 Kendo-Grid（用于 Angular）中，其中组件对每一行都重复。在另一个地方，它是在 ngFor 循环中重复的一系列卡片中。

问题是组件的模板需要在循环内与接受它的组件一起定义。原因是模板在这两种情况下都需要引用循环的对象。例如，在网格中，模板和组件的代码是这样的：

<kendo-grid [data]="data" ... >
  <ng-template kendoGridCellTemplate let-dataItem>
    <ng-template #myTemplate>
      <ng-container *ngIf="dataItem...">...</ng-container>
    </ng-template>
    <app-my-component [contentTemplate]="myTemplate" ... ></app-my-component>   
  </ng-template>
</kendo-grid>

在卡片中，它看起来像这样：

<ng-container *ngFor="let dataItem of data">
  <div class="card-component">
    <ng-template #myTemplate>
      <ng-container *ngIf="dataItem...">...</ng-container>
    </ng-template>
    <app-my-component [contentTemplate]="myTemplate" ... ></app-my-component>
  </div>
</ng-container>

模板可能看起来很简单，但 ... 表示其中包含更多代码。这意味着我在两个地方重复了很多代码。但我似乎别无选择，因为*ngIf="dataItem..."每个都需要dataItem定义，这意味着模板必须进入dataItem定义的循环。但这些是单独的循环，因此必须重复模板的代码。

所以我的问题是：有没有办法在一个位置定义我的模板并将其绑定到多个位置的组件？诀窍是我必须dataItem以模板内定义的方式执行此操作。

标签： angularloopsdryangular-template