ngIf 添加类

ngIf 是 Angular 框架中的一个指令，用于根据条件动态地添加或移除 HTML 元素。你可以使用 ngIf 指令来控制元素是否显示在网页中。

用法

以下是使用 ngIf 指令的常见用法：

<element *ngIf="condition">Content to render when condition is true.</element>

在上面的示例中，element 是要动态添加或移除的 HTML 元素，condition 是一个布尔值，表示是否要显示该元素。如果 condition 为 true，则该元素会被显示出来；如果 condition 为 false，则该元素将从 DOM 中移除。

你还可以使用 ngIf 的 else 和 then 块来根据条件显示不同的内容：

<ng-container *ngIf="condition; else elseBlock">Content to render when condition is true.</ng-container>
<ng-template #elseBlock>Content to render when condition is false.</ng-template>

在上面的示例中，elseBlock 指向一个 ng-template，它定义了在条件为 false 时要显示的内容。condition 为 true 时，Content to render when condition is true. 部分会被渲染；condition 为 false 时，Content to render when condition is false. 部分会被渲染。

举例说明

以下示例演示了如何使用 ngIf 指令添加类：

<div *ngIf="isAuthenticated; else loginBlock" class="theme">
  Welcome to the application!
</div>

<ng-template #loginBlock>
  <div class="login-theme">
    Please log in to access the application.
  </div>
</ng-template>

在上面的示例中，如果用户已经验证身份（isAuthenticated 为 true），则显示一个带有 .theme 类的 DIV，显示欢迎消息。如果用户没有验证身份（isAuthenticated 为 false），则显示一个带有 .login-theme 类的 DIV，要求用户登录。

总结

使用 ngIf 指令可以根据条件动态地添加或移除 HTML 元素。可以通过 else 和 then 块来定义条件为真或假时要显示的内容。这是 Angular 框架中一个非常有用的指令，可以根据应用程序状态来动态修改用户界面的内容。