Question

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

这是我试图运行的代码：

<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

您需要进行两项更改

使用public synchronized void start() { if(game.running) return; //... }
使用ng-container代替嵌套div

请参阅此stackblitz

ng-template

Answer 2

您可以尝试使用ngSwitch： https://angular.io/api/common/NgSwitch

Angular的示例代码：

<container-element [ngSwitch]="switch_expression">
  <some-element *ngSwitchCase="match_expression_1">...</some-element>
  <some-element *ngSwitchCase="match_expression_2">...</some-element>
  <some-other-element *ngSwitchCase="match_expression_3">...</some-other-element>
  <ng-container *ngSwitchCase="match_expression_3">
    <!-- use a ng-container to group multiple root nodes -->
    <inner-element></inner-element>
    <inner-other-element></inner-other-element>
  </ng-container>
  <some-element *ngSwitchDefault>...</some-element>
</container-element>

Answer 3

我找到了一种方法来保持原始设计的思维模式，而无需添加不必要的新DOM元素，复制HTML代码或重复检查相同的变量。

<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;then caseC"></ng-template>
            <ng-template #caseC>
                <el>3</el>
                <el>4</el>
                <el>5</el>
            </ng-template>
        </ng-template>
    </ng-template>
</div>

感谢大家为我提供了探索的其他途径，这些对我很有帮助。

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

3 个答案: