angular 中的 ngClass 理解语法

Question

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

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

我想了解这是做什么的，但我无法理解。 ngClass 到底是怎么回事？ 非常感谢任何帮助。

Answer 1

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

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

Answer 2

可以这样理解：

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

其中：

tagname: 是 HTML 元素。

ngClass: 是在 HTML 元素上添加和删除 CSS classes 的指令。

class-name: 是要应用于元素的 class 的名称。

flagVariable: 是实际存在于ts文件中的boolean类型的变量，决定是否在元素上应用class。如果 flagVariable 的值为真，则将应用 class，否则不应用。

您可以阅读更多相关信息 here。

Answer 3

表示if isOverlay returns true a class active将 添加到那个 div 元素 等等。所以 ngClass 是一个内置的 angular 指令 根据布尔属性 添加和删除 classes .

Answer 4

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

Answer 5

ngClass 是用于从 html 元素添加和删除 css class 的指令。更多信息查看官方doc.