在 Angular 中，我们经常需要根据不同的状态或条件来动态地改变 HTML 元素的样式。这时候，我们可以使用 Angular 提供的指令 ngClass 和 ngStyle 来实现。
ngClass
ngClass 指令可以动态地向 HTML 元素添加或移除一个或多个 CSS 类。它的语法如下：
<div [ngClass]="{'class1': condition1, 'class2': condition2, ...}">
...
</div>其中，condition1、condition2 等表示添加或移除对应的 CSS 类的条件，它们可以是一个表达式，也可以是一个变量。如果条件为真，则添加对应的 CSS 类，否则移除。class1、class2 等表示要添加或移除的 CSS 类名。
下面是一个示例：
<div [ngClass]="{'red': isRed, 'bold': isBold}">
This text is styled by ngClass.
</div>我们可以在组件中定义 isRed 和 isBold 变量，并根据需要改变它们的值。例如：
-- -------------------- ---- -------
------ ----- ----------- -
----- - -----
------ - ------
----------- -
---------- - ------------
-
------------ -
----------- - -------------
-
-当 isRed 为真时，red 类会被添加到 <div> 元素中，从而使文本变成红色。当 isBold 为真时，bold 类会被添加到 <div> 元素中，从而使文本加粗。
ngStyle
ngStyle 指令可以动态地设置 HTML 元素的 CSS 样式。它的语法如下：
<div [ngStyle]="{'style1': value1, 'style2': value2, ...}">
...
</div>其中，style1、style2 等表示要设置的 CSS 样式名，value1、value2 等表示要设置的 CSS 样式值。它们可以是一个表达式，也可以是一个变量。下面是一个示例：
<div [ngStyle]="{'color': textColor, 'font-size': fontSize + 'px'}">
This text is styled by ngStyle.
</div>我们可以在组件中定义 textColor 和 fontSize 变量，并根据需要改变它们的值。例如：
-- -------------------- ---- -------
------ ----- ----------- -
--------- - ------
-------- - ---
------------- -
-------------- - -------------- --- ----- - ------ - ------
-
------------------ -
------------- -- --
-
------------------ -
------------- -- --
-
-当 textColor 为 'red' 时，文本颜色为红色；当 fontSize 为 16 时，文本字号为 16px。我们可以调用 toggleColor()、increaseFontSize()、decreaseFontSize() 方法来改变文本颜色和字号。
总结
ngClass 和 ngStyle 指令是 Angular 中常用的样式指令，它们可以帮助我们动态地改变 HTML 元素的样式，从而实现更加灵活的界面效果。在使用它们时，我们需要注意条件和样式值的设置，以及避免出现样式冲突的情况。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65534bfdd2f5e1655dd096c2