在 Angular 中，我们常常需要动态地为 DOM 元素设置样式。这时，我们可以使用 ngStyle 指令来实现。ngStyle 指令可以根据我们绑定的某个表达式的值动态地为元素设置样式，它的使用非常简单，可以用以下的方式进行绑定：
<div [ngStyle]="{ 'color': myColor, 'font-size': myFontSize }">{{ someContent }}</div>在上面的代码中，我们将一个对象赋给了 ngStyle 指令，它的键名表示 CSS 属性名，键值表示我们要为这个属性设置的值。我们可以根据业务逻辑修改 myColor 和 myFontSize 的值，从而实现 DOM 元素的动态样式。
实例：为按钮设置不同的背景色和文本颜色
下面，我们就来看一个实例，演示如何使用 ngStyle 指令为按钮设置不同的背景色和文本颜色。首先，我们需要定义两个变量 bgColor 和 textColor，用来绑定样式：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- -----------
--------- -
------- ------------ ------------------- -------- -------- --------- -- -----------------------------------
--
--
------ ----- ------------ -
-------- ------ - -------
---------- ------ - --------
------------- -
------------ - ------
-------------- - --------
-
-在上面的代码中，我们定义了两个成员变量 bgColor 和 textColor，它们的初始值分别是 blue 和 white。当用户单击按钮时，我们将它们的值修改为 red 和 black。这样，按钮的背景色和文本颜色就动态变化了。
指南
在实际开发中，我们可能需要根据更复杂的业务逻辑来动态地设置样式。以下是一些常见的用法：
根据条件设置样式
我们可以使用三目运算符来根据条件设置不同的样式。例如：
<div [ngStyle]="condition ? { 'color': 'red' } : { 'color': 'blue' }">{{ someContent }}</div>其中，condition 表示一个条件表达式，如果它的值为真，就为文本设置红色的颜色，否则设置为蓝色的颜色。
根据表单数据设置样式
我们可以结合表单数据来设置样式。例如：
<input type="text" [(ngModel)]="fontSize" />
<div [ngStyle]="{ 'font-size': fontSize + 'px' }">{{ someContent }}</div>在上面的代码中，我们使用了 ngModel 指令来双向绑定一个文本框的值。通过 fontSize 变量的变化，我们可以动态地为文本设置字体大小。
根据路由参数设置样式
我们可以根据路由参数来设置不同的样式。例如：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - -------------- - ---- ------------------
------------
--------- -----------
--------- -
---- ------------ -------- --------- ----- ------- --------
--
--
------ ----- ------------ -
---------- -------
------------------- ------ --------------- --
---------- -
------------------------------------ -- -
-------------- - --------------- -- --------
---
-
-在上面的代码中，我们注入了路由参数服务 ActivatedRoute，并在 ngOnInit 方法中订阅了路由参数的变化。当路由参数中包含 color 时，我们将它的值赋给 textColor 变量，并根据它的值为文本设置相应的颜色。
总结
在本文中，我们详细介绍了 Angular 中使用 ngStyle 指令实现动态样式的方法，包括常见的用法和注意事项。通过本文的学习，我们可以更加灵活地为 DOM 元素设置样式，从而优化用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648eee8a48841e9894d51f1c