时间戳

首页 > 解决方案 > 如何将字符串转换为模板引用实例？

angular - 如何将字符串转换为模板引用实例？

问题描述

我正在 *ngFor 中设置 ngTemplateOutlet，如下面的代码片段

  <ul>
    <li *ngFor="let item of list">
      <ng-container [ngTemplateOutlet]="item.type"></ng-container>
    </li>
  </ul>

我在哪里list = [ {type: 'templateOne'}, {type: 'templateTwo'} ]定义了如下模板。

<ng-template #templateOne></ng-template>
<ng-template #templateTwo></ng-template>

上面的模板片段与下面提到的消息一起引发错误

TypeError: templateRef.createEmbeddedView is not a function
    at ViewContainerRef_.push../node_modules/@angular/core/fesm5/core.js.ViewContainerRef_.createEmbeddedView (core.js:21600)
    at NgTemplateOutlet.push../node_modules/@angular/common/fesm5/common.js.NgTemplateOutlet.ngOnChanges (common.js:4026)
    at checkAndUpdateDirectiveInline (core.js:22085)

由于item.type使用的ngTemplateOutlet是字符串类型，我怀疑它没有解析为 templateReference 变量。

如何将字符串转换为 templateReference 实例？

演示 -例如，请参阅此链接并验证控制台是否存在错误

标签： angularangular-template-variable

解决方案

这是工作示例：

    import { Component,ViewChild,TemplateRef,OnInit } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
  <ul>
     <li *ngFor="let item of list;let i = index">
      <ng-container [ngTemplateOutlet]="list[i].type"></ng-container>
    </li>
  </ul>
  <ng-template #templateOne>Template One</ng-template>
  <ng-template #templateTwo>Template Two</ng-template>
  `,
})
export class AppComponent  implements OnInit {
  @ViewChild('templateTwo', {read: TemplateRef}) tpl1: TemplateRef<any>;
  @ViewChild('templateOne', {read: TemplateRef}) tpl2: TemplateRef<any>;
  list;

    ngOnInit() {
      this.list=[{"type":this.tpl1},{"type":this.tpl2}];
    }

}

参考链接

工作示例 stackblitz

推荐阅读