动态 ngTemplateOutlet 值答案

【问题标题】：Dynamic ngTemplateOutlet value动态 ngTemplateOutlet 值
【发布时间】：2017-09-20 12:12:41
【问题描述】：

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

【问题讨论】：

删除项目周围的双括号，它应该可以工作。
如果我只是删除括号，它将显示不存在的#item 模板。这意味着它不会显示任何内容。
尝试将 item 括在括号中以使其作为表达式进行评估。 *ngTemplateOutlet="(item.ref)" 如果这不起作用，请执行 let item of [ { ref: 'div' }, { ref: 'span'} ] 并使用 *ngTemplateOutlet="item.ref" 查看此示例。 stackoverflow.com/questions/40418598/…

标签： angular angular2-template angular2-directives

【解决方案1】：

这是最短且最佳可行的解决方案

1 创建指令“dynamic-template.directive.ts”

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

2 在你的组件 helper-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>

3 在你的组件 helper-content.component.ts 中使用动态模板

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

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

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

【讨论】：

【解决方案2】：

只需将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 的函数。

【讨论】：

在 *ngTemplateOutlet 中 TemplateRef 发生变化时是否存在事件发射器？
我不知道，但您可以使用我在答案最后一句中提到的函数方法，并可能在那里捕捉到变化。
我在这里找到了我的问题的答案：stackoverflow.com/a/48229998/4079915 无论如何谢谢！

【解决方案3】：

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

【讨论】：