我的简化目标是构建一个包含项目模板的列表组件。 E.g:
<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, []);
预期结果:
实际结果:
•
•
•项目
答案 0 :(得分:23)
我就这样做了:
用法:
<template #myTemplate let-item="item">
<strong>Name: </strong> {{item.name}}<br>
<strong>Id: </strong> {{item.id}}
</template>
<app-template-param [items]="items" [template]="myTemplate"></app-template-param>
组件:
@Component({
selector: 'app-template-param',
templateUrl: 'template-param.html'
})
export class TemplateParamComponent implements OnInit {
@Input() items: Array<any>;
@Input() template: TemplateRef<any>;
}
组件HTML
<template #defaultTemplate let-item="item">
<strong>{{item.name}}</strong>
</template>
<ul>
<li *ngFor="let item of items">
<template [ngTemplateOutlet]="template || defaultTemplate" [ngOutletContext]="{item: item}"></template>
</li>
</ul>
答案 1 :(得分:14)
我发现了3种方法
gorkemasan24@gmail.com
输出:
@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>
plunker:https://plnkr.co/edit/ollxzUhka77wIXrJGA9t?p=preview
查看更多https://github.com/ilio/ng2-dynamic-components/blob/master/README.md
答案 2 :(得分:2)
AFAI尝试<ng-content>
无法重复绑定,但您可以将item
作为输入传递,就像这样
import {Component} from 'angular2/core';
@Component({
selector: 'list',
inputs: ['htmlIN'],
template: `
<ul>
<li *ngFor="#i of items" >
{{i}} {{htmlIN}}
</li>
</ul>
`
})
export class List {
htmlIN: any;
items = [1, 2, 3, 4];
}
@Component({
selector: 'my-app',
directives: [List],
template: `<list htmlIN="item"></list>`
})
export class App {
constructor(){
}
}
答案 3 :(得分:0)
我会考虑略微改变设计。我不是在<list>
和</list>
之间插入内容,而是通过ng-content
组件中的List
引用此类内容,而是创建一个扮演内容角色的组件(即&# 34;重复传递局部变量的模板,因此每个项目与所需的输入变量不同,并将组件插入到列表中。换句话说就像这样
<强> ContentComponent 强>
@Component({
selector: 'my-content',
inputs: ['inputVar'],
template: `<div>Item no. {{inputVar}}</div>`
})
export class MyContent {
inputVar: string;
}
<强>列表强>
@Component({
selector: 'list',
directives: [MyContent],
template: `
<ul>
<li *ngFor="let i of items" >
<my-content [inputVar]="i"></my-content>
</li>
</ul>
`
})
class List {
items = [1, 2, 3];
}
我希望它有所帮助