有没有办法动态设置 *ngTemplateOutlet 指令的值?
沿着这些思路:
<div *ngFor="let item of [ 'div', 'span' ]">
<ng-container *ngTemplateOutlet="{{ item }}"></ng-container>
</div>
<ng-template #div>
<div>some text inside a div</div>
</ng-template>
<ng-template #span>
<span>some text inside a span</span>
</ng-template>
当然它不起作用,但我想它很好地解释了我想要实现的目标:如果该项目是“div”,那么它应该显示#div 模板,如果它是“span”#span 模板。
只需点ngTemplateOutlet
在一个变量是TemplateRef
:
In HTML:
<button (click)="toggleTemplateSelected()">Toggle Template</button>
<br />
<p>Showing
<span class='viewType' *ngIf="showViewTemplate">C</span>
<span class='viewType' *ngIf="!showViewTemplate">C2</span>
template:</p>
<ng-container *ngTemplateOutlet='liveTemplate'></ng-container>
<!--Templates: -->
<ng-template #tmplC>
Hello from TemplateC
</ng-template>
<ng-template #tmplC2>
Hello from TemplateC2
</ng-template>
In code:
@ViewChild('tmplC') tmplC: TemplateRef<any>;
@ViewChild('tmplC2') tmplC2: TemplateRef<any>;
showViewTemplate = true;
liveTemplate: TemplateRef<any>;
toggleTemplateSelected() {
this.showViewTemplate = !this.showViewTemplate;
this.liveTemplate = this.showViewTemplate ? this.tmplC : this.tmplC2;
}
你也可以指ngTemplateOutlet
在一个返回 a 的函数中TemplateRef
.
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)