动态 web 应用程序通常具有动态样式这些样式在应用程序运行时设置。样式绑定是一种特殊的绑定用于动态地将值绑定到 HTML 元素的 style 属性。在本章中我们将详细了解样式绑定的更多细节。使用样式绑定的方式Angular 提供了四种不同的方式来实现样式绑定。每种样式绑定类型都支持特殊功能。四种方式如下单一样式绑定带单位的单一样式绑定多样式绑定通过自定义样式对象进行多样式绑定在接下来的章节中我们将逐一学习。单一样式绑定在单一样式绑定中CSS 样式的属性名应附加到 style. 字符串后并用方括号包围。例如可以使用 [style.width] 来设置 HTML 元素的宽度如下所示 −div [style.width]template variable !-- content -- /div带单位的单一样式绑定在带单位的单一样式绑定中CSS 样式的属性名应附加到 style. 字符串后单位如 .px应附加到 CSS 样式的属性名后并用方括号包围。例如可以使用 [style.width.px] 来设置 HTML 元素的宽度单位为 px如下所示 −div [style.width.px]template variable !-- content -- /div多样式绑定在多样式绑定中style 字符串应被方括号包围值应包含适当的 CSS 样式。例如可以使用 [style] 来设置 HTML 元素的宽度和高度如下所示 −div [style]template variable !-- content -- /div这里模板变量的一个示例输出是 width: 100px; height: 200px使用对象的多样式绑定在使用对象的多样式绑定中style 字符串应被方括号包围值应设置为类型为 Recordstring, string 的对象该对象具有适当的 CSS 属性名或转换为 camelCase和对应的值。例如可以使用 [style] 来设置 HTML 元素的宽度和高度如下所示 −div [style]objects as template variable !-- content -- /div这里一个示例对象如下{ width: 100px, height: 100px }实现样式绑定让我们创建一个简单的注册表单来理解属性绑定。我们的注册表单将包含以下三个输入字段和一个提交注册表单的按钮。1. Username 2. Password 3. Confirm password步骤 1使用 Angular CLI 创建一个新的应用my-app如下所示 −ng new my-app步骤 2使用 Angular CLI 创建一个新的注册表单组件RegisterForm如下所示 −ng generate component RegisterForm步骤 3接下来打开注册表单组件的模板文件并添加包含用户名、密码和确认密码的表单。register-form.htmldiv form methodpost div classcontainer label forusernamebUsername/b/label input typetext nameusername required label forpasswordbPassword/b/label input typepassword namepassword required label forconfirm_passwordbConfirm Password/b/label input typepassword nameconfirm_password required button typesubmitRegister/button /div /form /div步骤 4打开注册表单组件的 CSS 样式文件并使用 CSS 为表单添加样式如下所示 −register-form.css.container { padding: 15px; } input[typetext], input[typepassword] { width: 100%; padding: 10px 20px; margin: 10px 0; display: inline-block; border: 1px solid #ccc; box-sizing: border-box; } button { background-color: blue; color: white; padding: 15px 20px; margin: 10px 0; border: none; cursor: pointer; width: 100%; }步骤 5将我们的注册表单组件包含在应用模板文件app.html中app.htmlapp-register-form /输出步骤 6运行应用并测试注册表单。步骤 7接下来让我们尝试使用样式绑定为按钮应用样式。步骤 8在组件中添加一个包含必要值的对象如下所示 −btnStyle: Recordstring, string { backgroundColor: purple, color: white, padding: 15px 20px, margin: 10px 0, border: none, cursor: pointer, width: 100% }在这里我们将按钮的背景色从蓝色更改为紫色。还要注意背景色样式属性的名称 background-color 使用了 camelCase 格式即 backgroundColor。步骤 9接下来从组件的样式文件中移除按钮样式。步骤 10接下来通过样式绑定将样式对象分配给按钮。button typesubmit [style]btnStyleRegister/button步骤 11组件的完整代码如下所示register-form.tsimport { Component } from angular/core; Component({ selector: app-register-form, imports: [], templateUrl: ./register-form.html, styleUrl: ./register-form.css, }) export class RegisterFormComponent { btnStyle: Recordstring, string { backgroundColor: purple, color: white, padding: 15px 20px, margin: 10px 0, border: none, cursor: pointer, width: 100% } }步骤 12组件模板的完整代码如下所示register-form.htmldiv form methodpost div classcontainer label forusernamebUsername/b/label input typetext nameusername required label forpasswordbPassword/b/label input typepassword namepassword required label forconfirm_passwordbConfirm Password/b/label input typepassword nameconfirm_password required button typesubmit [style]btnStyle Register/button /div /form /div输出步骤 13运行应用并查看输出。ConclusionStyle binding 使开发者能够轻松地为任何 HTML 元素的 style 属性设置复杂值可以通过纯样式或自定义样式对象来实现。来源https://www.zjcp.cc/ask/6260.html