类和样式绑定

使用类和样式绑定从元素的 class属性中添加和删除 CSS 类名，以及动态设置样式。

前提条件

• property 绑定

绑定到单个 CSS class

要创建单个类绑定，请键入以下内容：

当绑定表达式 onSale为真值时，Angular 会添加类，当表达式为假值时，它会删除类 —— undefined除外。有关更多信息，参阅样式委托。

绑定到多个 CSS 类

要绑定到多个类，请键入以下内容：

[class]="classExpression"

表达式可以是以下之一：

• 用空格分隔的类名字符串。

• 以类名作为键名并将真或假表达式作为值的对象。

• 类名的数组。

对于对象格式，Angular 会在其关联的值为真时才添加类。

WARNING

对于任何类似对象的表达式（比如 object、Array、Map或 Set，必须更改对象的引用，Angular 才能更新类列表。在不更改对象引用的情况下只更新其 Attribute 是不会生效的。

如果同一类名有多个绑定，Angular 会根据样式优先级来确定要使用的绑定。

下表是各种类绑定语法的小结。

绑定类型	语法	输入属性	范例输入值
单一类绑定	[class.sale]="onSale"	boolean | undefined | null	true, false
多重类绑定	[class]="classExpression"	string	"my-class-1 my-class-2 my-class-3"
多重类绑定	[class]="classExpression"	Record<string, boolean | undefined | null&gt;	{foo: true, bar: false}
多重类绑定	[class]="classExpression"	Array<string&gt;	['foo', 'bar']

绑定到单一样式

要创建单个样式绑定，请使用 style前缀，后跟一个点和 CSS 样式的名称。

比如，要设置 'width' 样式，请键入以下内容：[style.width]="width"

Angular 将该属性设置为绑定表达式的值，这通常是一个字符串。（可选）你可以添加单位扩展名，比如 em或 %，这需要数字类型。

• 要以中线格式（dash-case）编写样式，请键入以下内容：

<nav [style.background-color]="expression"></nav>

• 要以驼峰格式（camelCase）编写样式，请键入以下内容：

<nav [style.backgroundColor]="expression"></nav>

绑定到多个样式

要切换多个样式，请绑定到 [style]Attribute，比如 [style]="styleExpression"。styleExpression可以是如下格式之一：

• 样式的字符串列表，比如 "width: 100px; height: 100px; background-color: cornflowerblue;"。

• 一个对象，其键名是样式名，其值是样式值，比如 {width: '100px', height: '100px', backgroundColor: 'cornflowerblue'}。

注意，不支持把数组绑定给 [style]。

WARNING

当把 [style]绑定到对象表达式时，该对象的引用必须改变，这样 Angular 才能更新这个类列表。在不改变对象引用的情况下更新其属性值是不会生效的。

单样式和多样式绑定示例

nav-bar.component.ts

@Component({
  selector: 'app-nav-bar',
  template: `
<nav [style]='navStyle'>
  <a [style.text-decoration]="activeLinkStyle">Home Page</a>
  <a [style.text-decoration]="linkStyle">Login</a>
</nav&gt;`
})
export class NavBarComponent {
  navStyle = 'font-size: 1.2rem; color: cornflowerblue;';
  linkStyle = 'underline';
  activeLinkStyle = 'overline';
  /* . . . */
}

如果同一个样式 Attribute 有多个绑定，Angular 将使用样式优先级来确定要使用的绑定。

下表是各种样式绑定语法的小结。

绑定类型	语法	输入属性	范例输入值
单一样式绑定	[style.width]="width"	string | undefined | null	"100px"
带单位的单一样式绑定	[style.width.px]="width"	number | undefined | null	100
多重样式绑定	[style]="styleExpression"	string	"width: 100px; height: 100px"
多重样式绑定	[style]="styleExpression"	Record<string, string | undefined | null&gt;	{width: '100px', height: '100px'}

样式优先级

一个 HTML 元素可以将其 CSS 类列表和样式值绑定到多个源（比如，来自多个指令的宿主绑定）。

下一步呢？

• 组件样式

• Angular 动画介绍