ngClass角度理解语法

Question

我正在检查一些代码，发现了这样的语法：

<div class="test" [ngClass]="{'active': isOverlay, 'on-page': onPage, 'spinner': showLoader, 'scroll': alphabetScroll}">

我试图了解这是什么，但我不知道。 ngClass都有什么。 非常感谢您的帮助。

Answer 1

可以理解为：

<tagname [ngClass]="{'class-name': flagVariable}"></tagname>

位置：

标记名：是HTML元素。

ngClass：是用于在HTML元素上添加和删除CSS类的指令。

类名称：是要在元素上应用的类的名称。

flagVariable：是ts文件中实际存在的boolean类型的变量，该变量决定是否应在元素上应用该类。如果是true，则取决于其值。否则将不应用类。

您可以详细了解here。

Answer 2

这意味着如果isOverlay返回true ，则将 active 类添加到该div元素，依此类推上。因此ngClass是内置的角度指令，用于基于布尔属性添加和删除类。

Answer 3

只需[ngClass] define在HTML元素上添加和删除CSS类。

要了解更多信息，请结帐https://angular.io/api/common/NgClass

Answer 4

您可以使用ng-Class为您的元素或组件赋予这些属性

Answer 5

ngClass是用于从html元素添加和删除css类的指令。有关更多信息，请查看官方doc。