迹忆客 专注技术分享

我们将介绍不同的方法，如 className 和 ngClass 在 Angular 中添加静态或动态类。我们还将介绍如何在 Angular 中切换类。

在 Angular 中添加静态或动态类

类是任何 Web 应用程序的主要部分。我们根据类名设计和执行不同的功能。

与单页应用程序框架一样，Angular 在数据绑定方面大放异彩。如果相应的 JavaScript 对象发生任何变化，DOM 元素会自动更新。

让我们使用以下命令创建一个新应用程序。

# angular
ng new my-app

在 Angular 中创建我们的新应用程序后，我们将使用此命令转到我们的应用程序目录。

# angular
cd my-app

现在，让我们运行我们的应用程序来检查所有依赖项是否安装正确。

# angular
ng serve --open

我们可以将类名绑定到任何 HTML 元素，就像我们通常在 HTML 中添加类名一样。唯一的区别是我们使用 className 而不是 class，如下所示。

# angular
<div [className]="'my-class'"></div>

上面的代码表明它只是一个分配给 div 元素的静态类。现在让我们讨论如何使用 className 添加动态类。

如下所示，我们可以根据条件更改或添加类到元素。

# angular
<div [className]="loggedIn ? 'logged-class' : 'my-class'"></div>

当条件 loggedIn 为 true 时，它将分配类 logged-class。如果条件为 false，它将分配类 my-class。

我们还可以在运行时构建一个类名，如下所示。

# angular
<div [className]="'class' + myValue"></div>

上面的例子展示了我们添加了一个字符串 class 和一个值 myValue，它可以是运行时的任何东西并创建一个类名。

在 Angular 中使用 NgClass

ngClass 是用于使代码看起来更精简的指令，因为它只是语法糖。使用起来方便，时间短。

ngClass 用途广泛。因此，让我们检查一下如何使用 ngClass，如下所示。

# angular
<div [ngClass]="'myclass'"></div>

ngClass 还可以帮助我们添加多个类名，如下所示。

# angular
<div [ngClass]="['my-class','second-class']"></div>

我们还可以使用条件来分配类名并根据条件切换它们，如下所示。

# angular
<div
  [ngClass]="{
  'my-class': loggedIn
}"
></div>

如下图，我们也可以根据两个不同的条件分配多个类。

# angular
<div
  [ngClass]="{
  'my-class': loggedIn,
  'second-class': !loggedIn
}"
></div>

我们还可以使用两种不同的条件，如下所示。

# angular
<div
  [ngClass]="{
  'my-class': loggedIn,
  'second-class': myValue
}"
></div>

因此，通过这种方式，我们可以使用 ClassName 和 ngClass 根据条件轻松分配类。我们还学习了使用 Angular 指令添加动态、静态或多个类。