在 Angular 中添加类
我们将介绍不同的方法,如 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 指令添加动态、静态或多个类。
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