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中实现此功能。

这是Plunker

Answer 1

过去有一个关于此的问题（请参阅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并且不支持它的能力。我认为我们可以为此添加一个问题......

这是我用于测试的那个傻瓜：https://plnkr.co/edit/a06vVP?p=preview。

Answer 2

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

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

2 个答案: