Angular2中列表组件的自定义模板（没有ng-content的嵌入）答案

【问题标题】：Custom template(transclusion without ng-content) for list component in Angular2Angular2中列表组件的自定义模板（没有ng-content的嵌入）
【发布时间】：2016-07-31 14:24:33
【问题描述】：

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

列表组件

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

【解决方案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>

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

过去有一个关于此的问题（请参阅Use content of component template in 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。

【讨论】：

这非常适合属性，但我们仍然不能使用自定义模板。我们不能以某种方式获取模板内容的引用并为 ngFor 像 angular1 一样克隆它吗？