按变量选择角度模板

Question

我有 3 种不同的<ng-template>。我的组件保存了具有我要渲染的模板名称的切换变量。如何将其注入我的页面？

Answer 1

当然，您可以从以下代码中通过以下方式执行此操作，您必须将<div>替换为您的<ng-template>

<div [ngSwitch]="yourValue">
<div *ngSwitchCase="'hello'">hello</div>
<div *ngSwitchCase="'world'">world</div>
<div *ngSwitchDefault>default</div>
</div>

这是：工作示例

更新：工作链接已更正。

Answer 2

可以使用对象来保存对模板的引用，然后仅通过字符串值引用该对象的属性。

@Component({
template: `
<ng-container *ngIf="{One:One,Two:Two,Three:Three} as templates">
<ng-container *ngTemplateOutlet="templates[name]"></ng-container>
</ng-container>
<ng-template #One>ONE</ng-template>
<ng-template #Two>TWO</ng-template>
<ng-template #Three>THREE</ng-template>
`
})
export class ExampleComponent {
public name = 'One';
}