Многоразовый список пользовательских компонентов в Angular - PullRequest
Новая
       24

Многоразовый список пользовательских компонентов в Angular

0 голосов
/ 21 мая 2018

Я хочу создать повторно используемый компонент SortedList в Angular5.Список должен принимать любой массив listItems (объектов) в качестве атрибута.Из компонента ListContainer я хочу использовать список и передать шаблон элемента списка следующим образом: 

<div class='list-container'>
<SortedList [items]='getListItems()' [categories]='getSortCategories()' >
  <ACustomItem [item]='item'></AcustomItem>
</SortedList
<div>

ACustomItem будет любым компонентом, который принимает [элемент], HTML-код будет зависеть от реализации.

Внутри моего SortList у меня есть: 

<div class='sorted-list'>
  <div class='sorted-list__header'>
    <div class='sorted-list__header-title'>{{title}}</div>
    <select [(ngModel)]='selectedCategory' (ngModelChange)='onCategoryChange($event)'>
      <option *ngFor='let category of categories' [ngValue]='category.id'>{{category.name}}</option>
    </select>
  </div>
  <div class='sorted-list__body'>
    <div *ngFor="let item of data | orderBy: selectedCategory.id ">
     <ng-content></ng-content>
    </div>
  </div>
</div>

Выше не работает, чего здесь не хватает?Я предполагаю, что мне нужно использовать ng-template здесь, но не уверен, как это должно быть встроено здесь?

1 Ответ

0 голосов
/ 21 мая 2018

Я нашел это решение и изменил его для Angular 5 и ваших конкретных компонентов.Поскольку ngOutletContext было удалено из версии 5 Angular здесь является примером в stackblitz.

Шаблон компонента SortedList 

<div *ngFor="let item of items">
    <template [ngTemplateOutletContext]='{item: item}' [ngTemplateOutlet]="templateVariable"></template>
</div>

Компонент SortedList ts 

@Input() items: any[];
@ContentChild(TemplateRef) templateVariable: TemplateRef<any>;

Шаблон компонента приложения 

<app-sorted-list [items]="myItems">
    <ng-template let-item="item">
        <!--Here can be any component-->
        <app-sorted-list-item [item]="item"></app-sorted-list-item>
    </ng-template> 
</app-sorted-list>
...