Пользовательский шаблон(передача без НГ-контент) для компонента списка в Angular2
У меня есть компонент списка, который показывает только имена. компонент списка должен иметь возможность взять пользовательский шаблон, который будет предоставлен пользователем.
Компонент Списка
import {Component } from 'angular2/core';
@Component({
selector: 'my-list',
template: `<p>This is List</p>
<ul>
<li *ngFor="#i of data"><div class='listItem'>{{i.name}}</div></li>
</ul>`
})
export class MyList implements OnInit{
data: Array<any> = [{name: 'John', age: 26},{name: 'Kevin', age: 26}, {name:'Simmons', age:26}];
}
Мое Требование
<my-list>
<div>{{i.name}}-{{i.age}}</div> //user should be able to provide custom template like this
</my-list>
Я пробовал это с ng-content, но он выдает ошибку. В угловой 1 то же самое, используемое для работы с раскрываемый контент. есть ли у нас какая-либо альтернатива ручной трансклюзии в angular 2, и если нет, то как мы могли бы реализовать эту функцию в angular2.
Вот плунжер
3 ответа:
Вам нужно использовать ngForTemplate, я создал PrimeNG DataList и многие другие компоненты данных, используя эту технику, и она отлично работает. Демо;
Http://www.primefaces.org/primeng/#/datalist
Код;
Https://github.com/primefaces/primeng/blob/master/src/app/components/datalist/datalist.ts
В компоненте определите templateRef с contentchild;
@ContentChild(TemplateRef) itemTemplate: TemplateRef;
Ваш шаблон становится;
template: `<p>This is List</p> <ul> <template ngFor [ngForOf]="data" [ngForTemplate]="itemTemplate"></template> </ul>`
Чтобы ваши пользователи могли определить содержание нравится;
<my-list> <template #anything> <div>{{anything.i.name}}-{{anything.i.age}}</div> </template> </my-list>
Был вопрос относительно этого в прошлом (см. Использование содержимого шаблона компонента в angular 2 ), и это, кажется, не поддерживается.
Здесь есть две вещи:
Когда вы предоставляете входной шаблон для компонента, ваша переменная
i
is вычисляется относительно текущего компонента, а неmy-list
. Если вы хотите использовать его свойства, вы должны сделать что-то вроде этого:<my-list #myList> <div>{{myList.i.name}}-{{myList.i.age}}</div> //user should be able to provide custom template like this </my-list>
Другая проблема заключается в способности использовать
ng-content
внутри цикла, и он не поддерживается. Я думаю, что мы могли бы добавить вопрос для этого...Вот плунжер, который я использовал для своих тестов: https://plnkr.co/edit/a06vVP?p=preview .
Вы можете найти короткое интересное руководство, которое покажет вам, как построить такой компонент списка с пользовательским шаблоном здесь .