Пользовательский шаблон(передача без НГ-контент) для компонента списка в 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 3
javascript transclusion

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

Был вопрос относительно этого в прошлом (см. Использование содержимого шаблона компонента в 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 .

1

Вы можете найти короткое интересное руководство, которое покажет вам, как построить такой компонент списка с пользовательским шаблоном здесь .

0