Angular 样式绑定

什么是 Angular 样式绑定？

简单来说，Angular 样式绑定用于设置 HTML 组件的样式。要在 Angular 应用程序中设置元素的样式，除了内联样式绑定之外，您还可以使用样式绑定。通过示例，我将在本文中演示如何使用内联和样式绑定来设置 HTML 元素的样式。

了解 Angular 中的样式绑定

让我们学习如何使用样式绑定和内联样式来设置 HTML 元素的样式。以下示例中按钮元素的字体阴影是关于使用 HTML 详细信息或内联样式的 style 属性。

当启动应用程序时，按钮将按预期显示为红色，如下图所示。

它将在下面的示例中设置样式（字体粗细）。 如果在 AppComponent 类中声明的布尔值“IsBold”为 true，则字体粗细样式设置为粗体； 如果不是，则设置为 normal。

可以使用 camelCase 或 dash-case 来编写样式属性名称。

对于多种样式，例如字体大小，有一个单位扩展。 如果在 AppComponent 类中声明的布尔值“IsBold”为 true，则字体粗细样式设置为粗体； 如果不是，则设置为 normal。

Angular 应用程序中的多个内联样式

如果您希望在 Angular 应用程序中设置多个内联样式，则需要使用 NgStyle 指令，如下例所示。

我们在这里做了什么？

• 在这里，我们使用 style 参数添加颜色样式。
• AppComponent 类的 AddCSSStyles() 函数是 ngStyle 的绑定。 我们将在 Angular ngStyle 指令文章中详细介绍此 ngStyle。
• Add Styles() 函数返回的对象由三个键/值对组成。 样式名称用作键，而产生样式值或对应样式属性的值的表达式用作值。
• 在 JavaScript 中，let 是一种新型的变量声明。 在这里，您也可以使用 var 而不是 let。

Angular 中的样式绑定允许根据特定条件或数据值将 CSS 样式动态应用于 HTML 组件。 这使得创建更具动态性和吸引力的用户界面成为可能。

1. 样式的属性绑定

使用 Angular 中的属性绑定，您可以绑定到内联样式。 当您希望动态设置单个样式属性时，这很有帮助。 属性绑定的语法是 Style.propertyName。

如果 isDisabled 评估为 false，按钮的背景颜色将为蓝色，否则为灰色。

2. NgStyle 指令

借助 Angular 的 ngStyle 指令，您可以动态设置多个内联样式。 它将一个对象作为输入，其中值代表关联的值，键代表样式属性名称。

如果 italic 和 bold 都为 true，则文本将分别以斜体和粗体显示。

3. 样式类绑定

有条件地应用预设 CSS 类有时更实用。 绑定到 class 属性并根据特定情况动态修改类可以帮助您完成此操作。

4. 样式封装

为了保证在一个组件中定义的样式不会影响其他组件的样式，Angular 提供了样式封装技术。 默认情况下，Angular 通过 Emulated Encapsulation 隔离样式，它模仿 Shadow DOM 的行为。 另一方面，ViewEncapsulation 是另一种选择。 如果需要，可以使用 ViewEncapsulation 和 None.native。

5. 在组件中计算动态样式

您可以在组件类中根据各种参数或信息动态计算样式。

之后，您可以将这些动态样式绑定到 HTML 中的元素。

Angular 开发人员可以通过结合这些技术和最佳实践来有效地管理和操作样式，从而生成视觉上吸引人且用户友好的 Web 应用程序。 开发人员可以使用 Angular 强大的样式绑定功能创建引人入胜的用户体验，这些功能支持简单的基于状态的颜色更改以及复杂的主题系统。

结论

总之，Angular 的样式绑定提供了一种有效的方法，可以根据各种情况、数据状态或用户输入将 CSS 样式动态应用于 HTML 组件。 Angular 开发人员可以通过利用属性绑定、ngStyle 指令和条件类绑定 (ngClass) 来生成极具吸引力且美观的用户界面。

样式可以通过属性绑定内联应用于各个元素，并且可以使用带有样式的动态对象同时应用许多样式。 此外，使用 ngClass 的条件类绑定使更复杂的样式场景和根据组件逻辑切换多个 CSS 类成为可能。