使用 ngStyle 动态设置样式元素

ngStyle 属性用于更改或设置 Angular 的多个属性的样式。您可以更改元素的值、颜色和大小等。

让我们通过一个例子来看看。

component.ts 文件

component.html 文件

在这里，我们选择了一种随机显示方法“在线”和“离线”。 有 50% 的几率。

输出

让我们使用 ngStyle 在服务器离线时将背景颜色更改为“红色”，在服务器在线时更改为“绿色”。

component.html 文件

在这里，我们创建了一个 getColor() 方法来动态更改颜色。

输出

如果两个服务器都在线，它将是

这是 ngStyle 属性与属性绑定结合使用的示例，用于配置它。

如何使用 ngClass 动态应用 CSS 类

在上一篇文章中，我们已经了解了如何使用 ngStyle 动态更改元素。 在这里，我们将使用 ngClass 指令将 CSS 类应用于元素。 它可以方便地动态添加或删除 CSS。

示例

让我们在 component.ts 文件中创建一个类，如果服务器在线，它会将文本的颜色更改为黄色。

component.ts 文件

component.html 文件

输出

您可以看到 ngClass 指令已更改在线文本的颜色。 这是 ngClass 指令与属性绑定结合使用以动态应用 CSS 类的示例。