创建TemplateRef并将其插入组件的模板中

Question

Angular 5.0.2基于https://angular.io/api/common/NgTemplateOutlet上提供的示例NgTemplateOutlet

我想知道是否有一种方法可以动态创建TemplateRef,然后将其注入组件的模板中.

例如,假设一个组件具有以下模板

<ng-container *ngTemplateOutlet="eng; context: myContext"></ng-container>
<ng-template #eng let-name><span>Hello {{name}}!</span></ng-template>

组件代码

class NgTemplateOutletExample {
  myContext = {$implicit: 'World'};
}

我想要的是使用以下模板将其转换为组件

<ng-container *ngTemplateOutlet="eng; context: myContext"></ng-container>

和组件代码一样

class NgTemplateOutletExample {
  eng:TemplateRef = this.createTemplateRef('<ng-template #eng let-name><span>Hello {{name}}!</span></ng-template>');
  myContext = {$implicit: 'World'};
}

是否可以TemplateRef从字符串创建？

Answer 1

您想要的是拥有动态模板。这样您就可以稍后放置模板而无需更改相同的组件。

现在你怎样才能实现这一目标呢？

创建主要组件呈现模板。<main-component>

main.component.html

<div class="box">
  <ng-container [ngTemplateOutlet]="template" [ngTemplateOutletContext]="context"></ng-container>
</div>

主要组件.ts

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

@Component({
  selector: 'app-main',
  templateUrl: './main.component.html',
  styleUrls: ['./main.component.css']
})
export class MainComponent implements OnInit {

  constructor() { }

  @ContentChild("template")
  template :TemplateRef<any>;

  ngOnInit() {

  }

  get context(){
    return this;
  }

}

• 现在您可以使用不同的模板使用同一组件*

应用程序组件.html

<app-main>
  <ng-template #template>Content From First Template</ng-template>
</app-main>
<br>
<app-main>
  <ng-template #template>Content From Second Template</ng-template>
</app-main>

输出

工作演示在这里https://stackblitz.com/edit/angular-yzkwrq