Angular - 在一个组件中的多个位置使用相同的 ng-template

Question

具有相同数据源的两个剑道组合框。有什么方法可以将第一个组合框中的 ng-template 重用到第二个组合框中吗？谢谢:)

<kendo-combobox #customerComboboxFrom [data]="customersData" [valueField]="'Name'" [textField]="'Name'" [(ngModel)]="journey.FromCustomer">
        <ng-template kendoComboBoxItemTemplate let-dataItem #customerOverview>
          <img [src]="dataItem.PhotoUrl" alt="">
          <div class="CustomerDetail">
            <span>{{dataItem.Name}}</span>
            <span class="lighter">{{dataItem.State}}, {{dataItem.Country}}, {{dataItem.District}}</span>
          </div>
        </ng-template>
      </kendo-combobox>
      <kendo-combobox #customerComboboxTo [data]="customersData" [valueField]="'Name'" [textField]="'Name'" [(ngModel)]="journey.FromCustomer">
      -----------  //Is there any way how to reuse HERE ng-template #customerOverview from above ?
      </kendo-combobox>

Answer 1

您可以使用 template outlet 将模板插入到第二个组合框中。 。作为替代方案，模板可以在组合框外部定义并插入到两个组合框的定义中。

<kendo-combobox #customerComboboxFrom [data]="customersData" ... >
  <ng-template kendoComboBoxItemTemplate let-dataItem #customerOverview>
    <img [src]="dataItem.PhotoUrl" alt="">
    <div class="CustomerDetail">
      <span>{{dataItem.Name}}</span>
      <span class="lighter">
        {{dataItem.State}}, {{dataItem.Country}}, {{dataItem.District}}
      </span>
    </div>
  </ng-template>
</kendo-combobox>

<kendo-combobox #customerComboboxTo [data]="customersData" ... >
  <ng-template kendoComboBoxItemTemplate let-dataItem>
    <ng-container *ngTemplateOutlet="customerOverview; context: { $implicit: dataItem }">
    </ng-container>
  </ng-template>    
</kendo-combobox>

参见this stackblitz进行演示。