动态ngTemplateOutlet值

Question

有没有办法动态设置* 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模板。

Answer 1

只需指向ngTemplateOutlet一个变量TemplateRef：

在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>

在代码中：

@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返回的函数TemplateRef。

Answer 2

将项目括在括号中以使其作为表达式进行计算。*ngTemplateOutlet="(item.ref)"如果这不起作用，请执行let item of [ { ref: 'div' }, { ref: 'span'} ]并使用*ngTemplateOutlet="item.ref" 类似于Can't get ngTemplateOutlet to work