Angular 7-ngTemplateOutlet变量值(表达式)

Question

我无法通过变量传递ng容器中*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成为变量值？

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

Answer 1

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

摘自angular.io

ViewChild

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

支持以下选择器。

• 。。。

• TemplateRef(例如，使用@ViewChild(TemplateRef(模板进行查询；(

请注意ng模板"SingleSelect"是如何捕获到下面的templateComponentVar中的：

应用程序组件.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>