关于[ngClass]如何使用

angular学习笔记

NgClass指令从 HTML 元素上添加和移除 CSS 类。

说明

CSS 类会根据表达式求值结果进行更新，更新逻辑取决于结果的类型：

• string - 会把列在字符串中的 CSS 类（空格分隔）添加进来，

• Array - 会把数组中的各个元素作为 CSS 类添加进来，

• Object - 每个 key 都是要处理的 CSS 类，当表达式求值为真的时候则添加，为假则移除。

<some-element [ngClass]="'first second'">...</some-element>

<some-element [ngClass]="['first', 'second']">...</some-element>

<some-element [ngClass]="{'first': true, 'second': true, 'third': false}">...</some-element>

<some-element [ngClass]="stringExp|arrayExp|objExp">...</some-element>

<some-element [ngClass]="{'class1 class2 class3' : true}">...</some-element>

今天用到了第三种：[ngClass]="{'hidden_y':selectedIndex !== 1}" ，其中hidden_y为CSS类样式名，selectedIndex为ts中的一个变量，当selectedIndex !== 1为true时，当前元素会动态添加hidden_y类样式。