0

我无法通过变量在我的 ng-container 中传递 *ngTemplateOutlet 的值。

app.component.ts

export class AppComponent  {
  templateName="SingleSelect";
}

app.component.html

<ng-container *ngTemplateOutlet="{{templateName}}">

</ng-container>

<ng-template #SingleSelect>
<p>Output from test template</p>
</ng-template>

{{templateName}}

当然，如果我在下面定义，一切都会按预期进行

<ng-container *ngTemplateOutlet="SingleSelect">

</ng-container>

如何使 SingleSelect 成为变量值？

Stackblitz 供参考 - https://stackblitz.com/edit/angular-h4mgyq?file=src%2Fapp%2Fapp.component.html

4

1 回答 1

1

对于这样的用例，您首先必须通过ViewChild查询捕获定义的模板，幸运的是该查询也支持TemplateRef。

摘自angular.io

查看孩子

配置视图查询的属性装饰器。

支持以下选择器。

  • ...

  • 一个 TemplateRef（例如使用 @ViewChild(TemplateRef) 模板查询；）

请注意如何将ng-template 'SingleSelect' 捕获到templateComponentVar以下内容中：

app.component.ts

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

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

app.component.html

<ng-container *ngTemplateOutlet="templateComponentVar"></ng-container>

<ng-template #SingleSelect>
  <p>Output from test template</p>
</ng-template>
于 2020-03-18T12:36:43.287 回答