角度相同的ng-模板在一个组件中的多个位置

Question

两个具有相同数据源的kendo-comboxes。有没有办法将ng模板从第一个组合框重用到第二个组合框？谢谢您:)

<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

您可以使用模板出口在第二个组合框中插入模板。作为另一种选择，模板可以在组合框之外定义，并插入两个组合框的定义中。

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

有关演示，请参见这一堆闪电战。