Javascript Angular2中列表组件的自定义模板（无ng内容的转换）

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

列表组件

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}];
}

从'angular2/core'导入{Component}；
@组成部分({
选择器：“我的列表”，
模板：`这是一个列表


{{i.name}
`
})
导出类MyList实现OnInit{
数据：Array
过去有一个关于这方面的问题（请参阅），但这似乎不受支持

这里有两件事：


当您为组件提供输入模板时，您的
i
is变量将根据当前组件而不是
my list
one进行计算。如果您要使用其属性，必须执行以下操作：

<my-list #myList>
  <div>{{myList.i.name}}-{{myList.i.age}}</div> //user should be able to provide custom template like this
</my-list>


{{myList.i.name}-{{myList.i.age}//用户应该能够提供如下自定义模板

另一个问题是在循环中使用
ng内容的能力，它不受支持。我认为我们可以为此添加一个问题


下面是我在测试中使用的plunkr的一个示例：。
您需要使用ngForTemplate，我已经使用此技术创建了PrimeNG DataList和许多其他数据组件，效果非常好。Demo


代码


在组件中，使用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>


{{anything.i.name}-{{{anything.i.age}
您可以找到一个简短有趣的指南，向您展示如何使用自定义模板构建这样的列表组件
.
这对于属性来说是完美的，但我们仍然不能使用自定义模板。难道我们不能以某种方式获取模板内容的引用并将其克隆到ngFor（如angular1）吗？很好的示例！感谢分享！与Angular 4配合使用也很好！：）谢谢。Angular 4中已弃用，将在5中删除，请改用：
<my-list>
   <template #anything>
        <div>{{anything.i.name}}-{{anything.i.age}}</div>
   </template>
</my-list>