Angular2 中列表组件的自定义模板（没有 ng-content 的包含）

Question

我有一个只显示名字的列表组件。列表组件应该能够采用用户提供的自定义模板。

列表组件

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

Answer 1

过去有一个关于此的问题（请参阅），这似乎不受支持。

这里有两件事：

当您为组件提供输入模板时，您的 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 的能力，但它不受支持。我认为我们可以为此添加一个问题...

这是我用于测试的插件：https://plnkr.co/edit/a06vVP?p=preview。

Answer 2

您需要使用 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>

Answer 3

您可以找到一个简短有趣的指南，向您展示如何使用自定义模板构建这样一个列表组件 here.

Angular2 中列表组件的自定义模板（没有 ng-content 的包含）

Custom template(transclusion without ng-content) for list component in Angular2

javascript

transclusion

angular