Question

首先让我说，我确实查看了有关ngTemplateOutlet的其他几个问题（例如：Angular 2 dynamically change the template in the ngTemplateOutlet或ngTemplateOutlet with dynamic value），但是这些问题并没有真正涵盖我想做的事情，或者也许我看不到如何将逻辑应用于我要实现的目标。

我的目标：

我有一个页面，我希望在其中可以更改模板的显示顺序。

我有2个简单的模板，“颜色”和“字体”：

<ng-template #colors>
  Red: #FF0000
  Green: #00FF00
  Blue: #0000FF
</ng-template>

<ng-template #fonts>
  Helvetica
  Verdana
  Times New Roman
</ng-template>

我可以按照预定义的顺序显示这些内容：

<div>
  <ng-container *ngTemplateOutlet="colors"></ng-container>
</div>
<div>
  <ng-container *ngTemplateOutlet="fonts"></ng-container>
</div>

我的问题是，我不知道如何基于组件上的变量显示这些模板。我的组件包含一个数组变量，其中包含要显示的模板的顺序和名称：

public order: ['fonts', 'colors'];

请注意，模板的顺序已切换，因此应先显示“字体”，然后显示“颜色”。

我的想法是根据这样的顺序变量来分配* ngTemplateOutlet值：

<ng-container [ngTemplateOutlet]="order[0]"></ng-container>
<ng-container [ngTemplateOutlet]="order[1]"></ng-container>

但是当我这样做时，出现以下控制台错误：

TypeError: templateRef.createEmbeddedView is not a function

我不确定这是哪里出了问题，也不确定如何从组件上的数组变量获取* ngTemplateOutlet来获取其模板名称。

我为此创建了这个堆叠闪电战：https://stackblitz.com/edit/angular-q7uqbx

任何帮助将不胜感激！

亲切的问候，

Jesper

Answer 1

您需要使用 ViewChild 来引用模板并将模板存储在数组中。

组件：

prototype

模板：

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  @ViewChild('colors') colors: TemplateRef<any>;
  @ViewChild('fonts') fonts: TemplateRef<any>;

  public order = [];

  ngAfterViewInit(): void {
    this.order = [this.fonts, this.colors];
  }
}

Angular根据组件变量使用* ngTemplateOutlet动态显示模板

1 个答案: