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。

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

1 个答案: