html - 如何正确嵌套多个 ng-if？

Question

我面临着多重嵌套的问题 ngIf应用于 ng-template Angular.js 中的元素，我似乎无法得到完美的答案。我知道解决方法，但它们没有优化。

这是我要运行的代码:

<div class="container">
    <ng-template *ngIf="booleanA;then caseA else caseB">
        <ng-template #caseA>
            <el>1</el>
            <el>2</el>
        </ng-template>
        <ng-template #caseB>
            <ng-template *ngIf="booleanB">
                <el>3</el>
                <el>4</el>
                <el>5</el>
            </ng-template>
        </ng-template>
    </ng-template>
</div>

这些是我找到的两个解决方案:

• 将 ngIf 放在 #caseB 中的每个子元素上元素:

    <ng-template #caseB>
        <el *ngIf="booleanB">3</el>
        <el *ngIf="booleanB">4</el>
        <el *ngIf="booleanB">5</el>
    </ng-template>
  

• 放置周边class="container" #caseA 里面的元素和 #caseB ，并应用第二个 ngIf对它:

    <ng-template *ngIf="booleanA;then caseA else caseB">
        <ng-template #caseA>
            <div class="container">
                <el>1</el>
                <el>2</el>
            </div>
        </ng-template>
        <ng-template #caseB>
            <div *ngIf="booleanB" class="container">
                <el>3</el>
                <el>4</el>
                <el>5</el>
            </div>
        </ng-template>
    </ng-template>
  

这些解决方案的问题在于优化。第一个检查多次相同的值，第二个使用相同的 HTML 元素两次。

有什么方法可以让原始设计发挥作用吗？

编辑:这两个解决方案不会显示为代码块，因此我将它们设置为内联代码。如果您知道如何解决这个问题，我们将不胜感激。

编辑 2:对我正在寻找的内容进行一些澄清:最终目标不是让代码正常工作，我已经找到了在所有其他方法都失败时可以使用的解决方法。

最终目标是让此代码仅与 Angular 的逻辑元素一起工作 <ng-template>并遵循原始设计；并且没有其他原生元素的帮助，例如div ，这会改变 DOM。

Answer 1

你需要做的两个改变

1. 使用 ng-container
2. 使用 div 而不是嵌套的 ng-template

请看这个stackblitz

<div class="container">
    <ng-container *ngIf="booleanA; then caseA; else caseB">
    </ng-container>
    <ng-template #caseA>
        <span>1</span>
        <span>2</span>
    </ng-template>
    <ng-template #caseB>
        <div *ngIf="booleanB">
            <span>3</span>
            <span>4</span>
            <span>5</span>
        </div>
    </ng-template>
</div>