我的简化目标是构建一个包含项目模板的列表的组件.例如.：
<list>item</list>
这是我的代码：
import {bootstrap} from 'angular2/platform/browser';
import {Component} from 'angular2/core';
@Component({
selector: 'list',template: `
<ul>
<li *ngFor="let i of items" >
<ng-content></ng-content>
</li>
</ul>
`
})
class List {
items = [1,2,3];
}
@Component({
selector: 'app',directives: [List],template: '<list>item</list>'
})
class App { }
bootstrap(App,[]);
预期结果：
>项目
>项目
>项目
实际结果：
•
•
•项目
我找到了3种方法
@Component({
selector: 'dynamic-list',template: '<div *ngFor="#item of items" *ngForTemplate="itemTemplate"></div>'
})
export class DynamicListComponent {
@ContentChild(TemplateRef)
public itemTemplate: TemplateRef;
@Input()
public items: number[];
}
<dynamic-list [items]="items">
<div template="#item">
Inline template item #: {{item}}
</div>
</dynamic-list>
输出：
Inline template item #: 1 Inline template item #: 2 Inline template item #: 3 Inline template item #: 4
广告牌：https://plnkr.co/edit/ollxzUhka77wIXrJGA9t?p=preview
看更多https://github.com/ilio/ng2-dynamic-components/blob/master/README.md
