在 Angular 中添加类

Rana Hasnain Khan 2023年1月30日 2022年4月20日
  1. 在 Angular 中添加静态或动态类
  2. 在 Angular 中使用 NgClass
在 Angular 中添加类

我们将介绍不同的方法,如 classNamengClass 在 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>

当条件 loggedIntrue 时,它将分配类 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>

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

Rana Hasnain Khan avatar Rana Hasnain Khan avatar

Rana is a computer science graduate passionate about helping people to build and diagnose scalable web application problems and problems developers face across the full-stack.

LinkedIn

相关文章 - Angular Class