我正在尝试显示基于类数组的模板。我不确定该怎么做。
我创建了两个模板,这些模板将被for循环引用。模板看起来像这样:
<ul>
<li *ngFor="let item of items">
<!-- Show one of the templates here -->
</li>
</ul>
<ng-template #buttonTemplate>
<button>Some Text</button>
</ng-template>
<ng-template #linkTemplate>
<a href="">Some Text</a>
</ng-template>
接下来,我创建了一个如下所示的javascript组件:
@Component({ /* Options */ })
export class MyComponent {
constructor() {
this.items = [
new ButtonClass(),
new LinkClass(),
new ButtonClass()
]
}
}
现在,当项目为#buttonTemplate
时如何使用instanceof ButtonClass
,而当项目为#linkTemplate
时如何使用instanceof LinkClass
?
答案 0 :(得分:3)
您可以使用*ngIf then else
<ul>
<li *ngFor="let item of items">
<ng-container *ngIf="item instanceOf LinkClass; then buttonTemplate else linkTemplate"></ng-container>
</li>
</ul>
<ng-template #buttonTemplate>
<button>Some Text</button>
</ng-template>
<ng-template #linkTemplate>
<a href="">Some Text</a>
</ng-template>
具有两个以上的模板:
<ul>
<li *ngFor="let item of items">
<ng-container *ngIf="item instanceOf XXX; then template1"></ng-container>
<ng-container *ngIf="item instanceOf XXX; then template2"></ng-container>
<ng-container *ngIf="item instanceOf XXX; then template3"></ng-container>
<ng-container *ngIf="item instanceOf XXX; then template4"></ng-container>
</li>
</ul>
要将数据传递到模板,您需要这样做:
<ng-container [ngTemplateOutletContext]="{myData:item}"
[ngTemplateOutlet]="item instanceOf XXX ? template_A: null"></ng-container>
和
<ng-template #template_A let-myData='myData'>
{{ myData.name }}
</ng-template>
编辑:您不能在HTML中使用instance of
。因此,您至少有两种选择:
*ngIf="isInstanceOfXXX(item); then X else X"
与
isInstanceOfXXX(item:any): item is ClassX{
return item instance of ClassX;
}
items = items.map(item => ({...item,type: item.constructor.name}))
并在您的html中:
*ngIf="item.type === 'ClassX'; then X else X"
但是要小心最后一种方法,ClassX.name是ES6功能,因此在IE11中不起作用
答案 1 :(得分:0)
最终我正在使用@ViewChild
,这使我可以将模板返回到ngTemplateOutlet
。
因此,除了ng-template
循环中新的for
之外,我的html并没有太大变化。
<ul>
<li *ngFor="let item of items">
<ng-template *ngTemplateOutlet="item | getTemplate : buttonTemplate : linkTemplate; context: {$implicit: {model: item, /* other properties */}}">
</li>
</ul>
<ng-template #buttonTemplate let-item>
<button>{{item.model.text}}</button>
</ng-template>
<ng-template #linkTemplate let-item>
<a href="{{item.model.endpoint}}">{{item.model.text}}</a>
</ng-template>
在我的JavaScript / TypeScript中,我添加了@ViewChild
和一个函数,该函数接受一个项目并测试引用并返回正确的TemplateRef
。
@Component({ /* Options */ })
export class MyComponent {
@ViewChild('buttonTemplate', { static: true })
public buttonTemplate
@ViewChild('linkTemplate', { static: true })
public linkTemplate
public items = [
new ButtonClass(),
new LinkClass(),
new ButtonClass()
]
getTemplate(item) {
if(item instanceof ButtonClass) return this.buttonTemplate
if(item instanceof LinkClass) return this.linkTemplate
}
}