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

Question

具有相同数据源的两个剑道组合框。有没有办法将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>

有关演示，请参阅此stackblitz。