在 Angular 中，我们通常使用组件来构建我们的应用程序界面，而样式是这些组件的重要组成部分。在一些情况下，我们需要动态地改变组件的样式，例如根据用户的输入或者组件的状态来改变样式。这时，Angular 提供了一个指令 ngStyle，它可以让我们动态地设置元素的 style 属性，从而实现样式的动态变化。
ngStyle 指令的基本用法
ngStyle 指令可以用在任何 HTML 元素上，它的基本语法如下：
<div [ngStyle]="{'property1': value1, 'property2': value2, ...}">...</div>其中，属性 property1、property2 等是 CSS 样式属性，value1、value2 等是对应的样式值。我们可以根据需要添加多个属性和值对，它们之间用逗号隔开。当属性的值需要根据组件的状态或者用户的输入来动态改变时，我们可以在组件的 TypeScript 代码中定义一个属性，然后在模板中使用这个属性来给 ngStyle 指令传递样式值。
例如，我们可以创建一个组件，当用户输入一个数字时，改变组件的背景颜色。这时，我们可以在组件的 TypeScript 代码中定义一个名为 bgColor 的属性，然后在模板中使用 ngStyle 指令来动态地设置背景颜色：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- -----------
--------- -
-----
------------ - ---------------
------ ----------- ----------------- --
------
---- ------------------------------- ----------
--- ---------- ----- ---- ------ ---- --- ----- - -------
------
--
--
------ ----- ------------ -
---- -------
-------- -------
------------- -
-------- - --
------------ - --------
-
------------- -
-- --------- - -- -
------------ - --------
- ---- -- --------- - -- -
------------ - ------
- ---- -
------------ - --------
-
-
-在上面的代码中，我们创建了一个名为 bgColor 的属性，它的初始值为 'white'。当用户输入一个数字时，ngOnChanges 方法会被调用，我们根据输入的数字来改变 bgColor 的值，从而改变组件的背景颜色。
ngStyle 指令的高级用法
除了基本用法外，ngStyle 指令还提供了一些高级用法，可以更加灵活地处理样式属性。下面，我们来介绍几个常见的高级用法。
1. 使用对象传递样式属性
除了使用属性和值对来设置样式属性外，ngStyle 指令还支持使用一个对象来传递样式属性。例如，我们可以将样式属性和值都放在一个对象中，然后将这个对象传递给 ngStyle 指令：
<div [ngStyle]="myStyles">...</div>
在组件的 TypeScript 代码中，我们可以定义一个名为 myStyles 的对象，它包含一些样式属性和值：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- -----------
--------- -
---- ---------------------
---- -- - --- ---- ---- -------
------
--
--
------ ----- ------------ -
-------- - -
------------------- ------
-------- --------
------------ -------
---------- -------
--
-在上面的代码中，我们定义了一个名为 myStyles 的对象，它包含了一些样式属性和值。我们将这个对象传递给 ngStyle 指令，从而设置 div 的样式。
2. 使用数组传递样式属性
除了使用对象传递样式属性外，ngStyle 指令还支持使用数组来传递样式属性。这种方式比较灵活，可以根据组件的状态来动态地添加或移除样式属性。例如，我们可以定义一个名为 myStyles 的数组，根据组件的状态来添加或移除样式属性：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- -----------
--------- -
---- ---------------------
---- -- - --- ---- ---- -------
------
--
--
------ ----- ------------ -
------ - ------
-------- - ------
----------- - ------
--- ---------- -
--- ------ - ---
-- ------------- -
--------------------- - -------
-
-- --------------- -
-------------------- - ---------
-
-- ------------------ -
------------------------- - ------------
-
------ -------
-
-在上面的代码中，我们定义了三个属性 isBold、isItalic 和 isUnderline，它们的值根据组件的状态来动态改变。在 get 方法中，我们根据这些属性的值来动态生成一个样式对象 styles，然后将这个对象传递给 ngStyle 指令，从而设置 div 的样式。
3. 使用表达式传递样式属性
ngStyle 指令还支持使用表达式来传递样式属性。这种方式比较灵活，可以根据组件的状态来动态地计算样式属性的值。例如，我们可以定义一个名为 myStyles 的方法，根据组件的状态来计算样式属性的值：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- -----------
--------- -
---- -----------------------
---- -- - --- ---- ---- -------
------
--
--
------ ----- ------------ -
------ - ------
-------- - ------
----------- - ------
---------- -
--- ------ - ---
-- ------------- -
--------------------- - -------
-
-- --------------- -
-------------------- - ---------
-
-- ------------------ -
------------------------- - ------------
-
------ -------
-
-在上面的代码中，我们定义了一个名为 myStyles 的方法，它根据组件的状态来计算样式属性的值。我们将这个方法传递给 ngStyle 指令，从而设置 div 的样式。
总结
在本文中，我们介绍了 Angular 中使用 ngStyle 指令动态处理 style 属性的方法。ngStyle 指令可以让我们动态地设置元素的样式属性，从而实现样式的动态变化。除了基本用法外，ngStyle 指令还提供了一些高级用法，可以更加灵活地处理样式属性。掌握 ngStyle 指令的用法，可以让我们更加灵活地处理组件的样式，提高应用程序的交互性和可用性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6638a093d3423812e46a744f