Пользовательский шаблон (включение без ng-контента) для компонента списка в 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, но он выдает ошибку. В angular 1 то же самое использовалось для работы с включенным контентом. есть ли у нас какая-либо альтернатива ручному включению в angular 2, и если нет, то как мы можем реализовать эту функцию в angular2.

Вот Plunker


javascript angular transclusion
person Akhlesh    schedule 10.04.2016    source источник

Ответы (3)


arrow_upward
12
arrow_downward

Вам нужно использовать ngForTemplate, я создал PrimeNG DataList и многие другие DataComponents, используя эту технику, и она отлично работает. Демо;

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>
person Cagatay Civici    schedule 10.04.2016
comment
Отличный пример! Спасибо, что поделился! Отлично работает и с Angular 4! :) - person tftd; 16.04.2017
comment
Спасибо. ‹template› устарел в angular 4 и будет удален в 5, вместо этого используйте ‹ng-template›: github.com/angular/angular/blob/master/ github.com/angular/angular/commit/bf8eb41 - person Tom Dunn; 29.05.2017

arrow_upward
1
arrow_downward

В прошлом был вопрос по этому поводу (см. содержимое шаблона компонента в angular 2), и это, похоже, не поддерживается.

Здесь есть две вещи:

  • Когда вы предоставляете входной шаблон для компонента, ваша i переменная оценивается относительно текущего компонента, а не 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 в цикле, и это не поддерживается. Я думаю, что мы могли бы добавить проблему для этого...

Вот plunkr, который я использовал для своих тестов: https://plnkr.co/edit/a06vVP?p=preview.

person Thierry Templier    schedule 10.04.2016
comment
это идеально подходит для свойств, но все же мы не можем использовать собственный шаблон. мы не можем как-то получить ссылку на содержимое шаблона и клонировать его для ngFor, например angular1? - person Akhlesh; 10.04.2016

arrow_upward
0
arrow_downward

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

person O.DO    schedule 24.10.2017