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>

这是：working example

更新：工作链接已纠正。

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

通过变量选择角度模板

2 个答案: