在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>