在 Angular 的单个页面中管理多个模板

Question

我有一个用例，我需要根据条件在屏幕上显示 1 个视图(模板(。他们有超过 10 个可用的模板，但一次只需要其中一个可见。

以下哪项解决方案最相关

1. 在每个div 上使用 ngIf
2. 使用 ngSwitch 并根据条件显示div
3. 使用模板(如何管理(
4. 还有其他方法..？

我想为每种视图类型使用模板，以便我的代码保持干净且可伸缩。

Answer 1

您可以将ngSwitch与多个模板一起使用，这个解决方案对我来说看起来很清楚。

    <ng-container [ngSwitch]="condition">
        <ng-container *ngSwitchCase="condition1" [ngTemplateOutlet]="condition1Template"></ng-container>
        <ng-container *ngSwitchCase="condition2" [ngTemplateOutlet]="condition2Template"></ng-container>
    </ng-container>
    <ng-template #condition1Template></ng-template>
    <ng-template #condition1Template></ng-template>