Angular2中列表组件的自定义模板(不包含ng-content的转换)

Question

我有一个列表组件,只显示名称.list组件应该能够获取由用户提供的自定义模板.

列表组件

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同样的事情用于处理被抄除的内容.我们在角度2中有任何替代的手动转换,如果没有,那么我们如何在angular2中实现此功能.

这是普兰克

Answer 1

您需要使用ngForTemplate,我已经使用这种技术创建了PrimeNG DataList和许多其他DataComponents,它运行良好.演示;

http://www.primefaces.org/primeng/#/datalist

码;

https://github.com/primefaces/primeng/blob/master/src/app/components/datalist/datalist.ts

在您的组件中,使用contentchild定义templateRef;

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