要创建一个单个类绑定，可以输入以下内容：[class.sale]="onSale"
当绑定的表达式 onSale 的值为真时，Angular会添加这个类，当表达式的值为假时，它会移除这个类（除了 undefined 的情况）
绑定多个 CSS 类
[class]="classExpression"
表达式可以是以下之一：
由空格分隔的类名字符串
一个以类名为键，真值或假值表达式为值的对象
一个类名数组
使用对象格式时，只有当与其关联的值为真时，Angular 才会添加类
如果对同一个类名有多个绑定，Angular 会使用样式优先级来确定使用哪个绑定
| BINDING TYPE | SYNTAX | INPUT TYPE | EXAMPLE INPUT VALUES |
|---|---|---|---|
| Single class binding | [class.sale]="onSale" | boolean | undefined | null | true, false |
| Multi-class binding | [class]="classExpression" | string | "my-class-1 my-class-2 my-class-3" |
| Multi-class binding | [class]="classExpression" | Record<string, boolean | undefined | null> | {foo: true, bar: false} |
| Multi-class binding | [class]="classExpression" | Array<string> | ['foo', 'bar'] |
绑定到单一样式
要创建一个单个样式绑定，使用前缀 style，后跟一个点和 CSS 样式的名称
例如，要设置宽度样式，可以输入以下内容：[style.width]="width"
Angular 将该属性设置为绑定表达式的值，通常是一个字符串。可选地，您可以添加单位扩展，如 em 或 %，这需要一个数字类型
<nav [style.background-color]="expression"></nav>
<nav [style.backgroundColor]="expression"></nav>
绑定多种样式
要切换多个样式，请绑定到 [style] 属性，例如 [style]="styleExpression"。styleExpression 可以是以下之一：
- 一个样式字符串列表，例如 "width: 100px; height: 100px; background-color: cornflowerblue;
- 一个以样式名称为键，样式值为值的对象，例如 {width: '100px', height: '100px', backgroundColor: 'cornflowerblue'}
请注意，不支持将数组绑定到 [style]
当将 [style] 绑定到对象表达式时，必须改变对象的身份才能使 Angular 更新类列表。如果不改变对象身份，更新属性将没有效果
| BINDING TYPE | SYNTAX | INPUT TYPE | EXAMPLE INPUT VALUES |
|---|---|---|---|
| Single style binding | [style.width]="width" | string | undefined | null | "100px" |
| Single style binding with units | [style.width.px]="width" | number | undefined | null | 100 |
| Multi-style binding | [style]="styleExpression" | string | "width: 100px; height: 100px" |
| Multi-style binding | [style]="styleExpression" | Record<string, string | undefined | null> | {width: '100px', height: '100px'} |
Related Actions