Angular 动态ngTemplateOutlet值

有没有办法动态设置*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”，那么它应该显示#div模板，如果它是“span”，则显示#span模板。

将项括在括号中，以使其作为表达式进行计算

*ngTemplateOutlet=“（item.ref）”

如果这不起作用，请执行

让[{ref:'div'}，{ref:'span'}]的项

并使用

*ngTemplateOutlet=“item.ref”

类似的操作，只需将

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>

切换模板


显示
C
C2
模板：

你好，来自TemplateC
来自TemplateC2的你好

代码：

@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;
}

@ViewChild（'tmplC'）tmplC:TemplateRef；
@ViewChild（'tmplC2'）tmplC2:TemplateRef；
showViewTemplate=true；
liveTemplate:TemplateRef；
toggleTemplateSelected（）{
this.showViewTemplate=！this.showViewTemplate；
this.liveTemplate=this.showViewTemplate？this.tmplC:this.tmplC2；
}

---

您还可以将

ngTemplateOutlet

指向一个返回

TemplateRef

的函数这里是最短和最佳可行的解决方案

1创建指令“dynamic template.Directive.ts”

从'@angular/core'导入{指令，输入，TemplateRef}；
@指示({
选择器：“[动态模板]”
})
导出类dynamicTemplate指令{
@Input（）id:number；
构造函数（公共模板：TemplateRef）{}
}  

2在组件助手content.component.html中定义动态模板

<ng-template [dynamic-template] [id]="1">
  This is 1st Template
</ng-template>
<ng-template [dynamic-template] [id]="2">
  This is 2nd Template
</ng-template>
<ng-template [dynamic-template] [id]="3">
  This is 3rd Template
</ng-template>

<div class="content" >
      <ng-container *ngTemplateOutlet="helpTemplate"></ng-container>
    </div>

这是第一个模板
这是第二个模板
这是第三个模板

3在组件助手content.component.ts中使用动态模板

import { Directive, Input, TemplateRef } from '@angular/core';
@Directive({
  selector: '[dynamic-template]'
})
export class DynamicTemplateDirective {
  @Input() id: number;
  constructor(public template: TemplateRef<any>) { }
}  

import { DynamicTemplateDirective } from '@app/components/dynamic-template.directive';

export class HelperContentComponent implements OnInit {
helpTemplate: TemplateRef<any>;
  @ViewChildren(DynamicTemplateDirective) templateRefs: QueryList<DynamicTemplateDirective>;

constructor(private eventService: EventEmitterService) {
  }

getTemplate(templateId: number): TemplateRef<any> {
    return this.templateRefs.toArray().find(x => x.id == templateId).template;
  }

showHelperContent(id: number) {
    
      this.helpTemplate = this.getTemplate(id);
      
     }
}

从'@app/components/dynamic template.directive'导入{DynamicTemplateDirective}；
导出类HelperContentComponent实现OnInit{
帮助模板：TemplateRef；
@ViewChildren（DynamicTemplateDirective）templateRefs:QueryList；
构造函数（私有eventService:EventEmitterService）{
}
getTemplate（templateId:number）：TemplateRef{
返回这个.templateRefs.toArray（）.find（x=>x.id==templateId）.template；
}
showHelperContent（id:编号）{
this.helpTemplate=this.getTemplate（id）；
}
}

4在helper content.component.html中使用helpTemplate变量

<ng-template [dynamic-template] [id]="1">
  This is 1st Template
</ng-template>
<ng-template [dynamic-template] [id]="2">
  This is 2nd Template
</ng-template>
<ng-template [dynamic-template] [id]="3">
  This is 3rd Template
</ng-template>

<div class="content" >
      <ng-container *ngTemplateOutlet="helpTemplate"></ng-container>
    </div>

删除项目周围的双括号，它应该可以工作。如果我简单地删除括号，它将显示不存在的#项目模板。这意味着它将不显示任何内容。请尝试将项包装在括号中，以使其作为表达式进行计算

*ngTemplateOutlet=“（item.ref）”

如果这不起作用，请执行

让[{ref:'div'}，{ref:'span'}]的项

并使用

*ngTemplateOutlet=“item.ref”

检查此示例。当*ngTemplateOutlet中的TemplateRef发生更改时，是否存在任何事件发射器？我不知道，但您可以使用我在答案的最后一句中提到的函数方法，并可能在那里捕捉到更改。我在这里找到了我问题的答案：无论如何，谢谢！