ngIf else ng-container介绍

概述

在 Angular 中，ngIf 指令是一种结构型指令，它根据条件对元素进行添加或移除。 ngIf 指令接受一个条件表达式，如果该表达式为真，则添加元素，否则删除元素。

ng-container 是一个逻辑容器，它可以用来包装其他元素，但不会在容器中创建一个额外的 DOM 元素。它主要是在复杂的嵌套结构中使用，以避免在 DOM 树中创建多个层级结构。

ngIf else 语法是 if 和 else 的结合，它允许我们在条件为假的情况下显示另一个模板。当条件为 true 时，模板正常呈现。当条件为 false 时，它将呈现 else 语句中的模板。

ngIf

基本用法

<ng-container *ngIf="condition">
  <div>如果条件为真，将会显示这些元素</div>
</ng-container>

在上面的示例中，我们使用 ng-container 包含一个 div 元素。当条件为真时， ng-container 中的元素将呈现。如果条件为假，则不会在 DOM 中添加 ng-container 或它的子元素。

else 子句

ngIf 指令可以使用 else 子句指定一个备选模板，以替换条件为假的元素。

<ng-container *ngIf="condition; else elseBlock">
  <div>如果条件为真，将会显示这些元素</div>
</ng-container>

<ng-template #elseBlock>
  <div>如果条件为假，将会显示这些元素</div>
</ng-template>

我们使用 else 关键字来指定一个备选模板，并使用 #elseBlock 对其进行命名。当条件为真时，将呈现 ng-container 中的元素。如果条件为假，则会呈现 #elseBlock 模板中的元素。

ng-container

ng-container 可以在没有添加任何额外元素或类的情况下作为一个逻辑容器使用。以下示例演示如何使用 ngIf 和 ng-container 来呈现复杂的条件。

使用 ngIf 和 ng-container

<ng-container *ngIf="loggedIn">
  <div>Your user profile and settings </div>
  <div>can be accessed from here.</div>
</ng-container>

<ng-container *ngIf="!loggedIn">
  <div>Please log in to access your settings. </div>
  <div>Or you can create a new account.</div>
</ng-container>

在这个示例中，ng-container 仅仅是一个逻辑分组器。它是一个空容器，其中包含两个带有文本的 div 元素。当条件为真时，它将呈现一个完整的段落，包括 "Your user profile and settings" 和 "can be accessed from here."。否则，它将呈现一个段落，包括 "Please log in to access your settings." 和 "Or you can create a new account."。

总结

ngIf 指令是一种非常常见的 Angular 指令，它可以用来选择性地添加或移除元素，以根据条件显示内容。

ng-container 是一个逻辑容器，它主要用于包装其他元素，以便在复杂的结构中避免多个层级的元素。

ngIf else 语法使我们能够在条件不满足时显示另一个备选模板。

在组合使用这些指令时，我们可以更好地管理我们的代码和结构，并能够更容易地维护和更新我们的 Angular 应用程序。