按变量选择 angular 个模板

Question

我有 3 个不同的 <ng-template>。我的组件保存带有我要呈现的模板名称的切换变量。如何将其注入我的页面？

Answer 1

你当然可以用下面的方法来做，你必须用你的 <ng-template>

替换 <div>

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

这是：working example

更新： 工作 link 更正。

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';
}

按变量选择 angular 个模板

Choose angular template by variable

angular

ng-template