Angular

Question

两个 kendo-comboxes 具有相同的数据源。有什么办法可以将第一个组合框的 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。

Angular - 在一个组件的更多地方使用相同的 ng-template

Angular - same ng-template on more places in one component

ng-template