面试题：Angular内置指令之NgClass的使用场景及原理

Question

请阐述Angular中NgClass指令的常见使用场景，并简要说明它是如何根据表达式动态添加或移除CSS类的。

Answer 1

NgClass指令常见使用场景

1. 根据条件切换样式：例如，根据用户是否登录，为页面元素添加不同的样式。若用户已登录，添加一个表示“已登录”状态的样式类；若未登录，则添加表示“未登录”状态的样式类。
2. 根据数据状态显示不同样式：在表格中，根据数据的不同状态显示不同的行样式。如订单状态为“已完成”时，行添加绿色背景类；订单状态为“待处理”时，行添加黄色背景类。
3. 基于用户操作改变样式：当用户点击某个按钮，为按钮自身或相关元素添加特定样式。比如点击一个“展开/收起”按钮，为目标元素添加表示“展开”或“收起”状态的样式类。

动态添加或移除CSS类的原理

NgClass指令通过绑定一个表达式来实现动态添加或移除CSS类。该表达式可以是一个字符串、对象或数组。

1. 字符串形式：表达式的值为一个CSS类名的字符串，当表达式的值存在且为有效类名时，该类会被添加到元素上。例如：[ngClass]="'active'"，此时元素会添加active这个CSS类。
2. 对象形式：表达式是一个对象，对象的键是CSS类名，值是布尔值。当布尔值为true时，对应的CSS类会被添加到元素上；当布尔值为false时，对应的CSS类会被移除。例如：[ngClass]="{'active': isActive, 'disabled': isDisabled}"，如果isActive为true，则添加active类；如果isDisabled为true，则添加disabled类，反之则移除相应类。
3. 数组形式：表达式是一个数组，数组中的元素是CSS类名或返回CSS类名的函数。数组中的每个有效类名都会被添加到元素上。例如：[ngClass]="['active', getExtraClass()]"，这里active类会被添加，同时getExtraClass函数返回的类名也会被添加（前提是函数返回有效类名）。