Angular - один и тот же ng-шаблон на нескольких местах в одном компоненте - PullRequest
Новая
       7

Angular - один и тот же ng-шаблон на нескольких местах в одном компоненте

0 голосов
/ 27 октября 2018

Два кендо-комбокса с одним источником данных. Есть ли способ, как повторно использовать 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>

1 Ответ

0 голосов
/ 27 октября 2018

Вы можете вставить шаблон во второй выпадающий список с шаблоном .В качестве альтернативы, шаблон может быть определен вне комбо-боксов и вставлен в определение обоих комбо-боксов. 

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

См. этот стек-блиц для демонстрации.

...