Attribute 绑定、类绑定和样式绑定
1. 绑定到 Attribute
优先设置带有 Property 绑定的元素的 Property。如果没有可绑定的元素 Property,可以使用 Attribute 绑定。
例如,ARIA和SVG 只有 Attribute。 ARIA 和 SVG 都不对应于元素的 Property,也不设置元素的 Property。在这些情况下,必须使用 Attribute 绑定,因为没有相应的目标 Property。
<p [attr.attribute-you-are-targeting]="expression"></p>
当表达式解析为 null 时,Angular 会完全删除该 Attribute。
用例
用例1:设置 ARIA Attribute
<!-- create and set an aria attribute for assistive technology -->
<button [attr.aria-label]="actionName">{{actionName}} with Aria</button>
用例2:绑定到 colspan
colspan Attribute 可帮助你以编程方式让表格保持动态。根据应用中用来填充表的数据量,某一行要跨越的列数可能会发生变化。
-
要将 Attribute 绑定到 的 colspan Attribute:
- 使用以下语法指定 colspan:[attr.colspan] 。
- 将 [attr.colspan] 设置为等于某个表达式。
在下面的示例中,我们将 colspan Attribute 绑定到表达式 1 + 1。
<!-- expression calculates colspan=2 -->
<tr><td [attr.colspan]="1 + 1">One-Two</td></tr>
注意:有时,Property 名和 Attribute 名之间存在差异。
colspan 是 的 Attribute,而 colSpan(注意 “S” 是大写)是 Property。使用 Attribute 绑定时,请使用带小写 “s” 的 colspan。有关如何绑定到 colSpan Property 的更多信息,请参见 Property 绑定 中的 colspan 和 colSpan 部分。
绑定到 class Attribute
可以使用类绑定从元素的 class Attribute 中添加和删除 CSS 类名称。
绑定到单个 CSS class
要创建单个类绑定,请使用前缀 class 后跟一个点和 CSS 类的名称,例如 [class.sale]="onSale"
。onSale 为真值时添加类,在表达式为假值时(undefined 除外)删除类。
绑定到多个 CSS 类
要绑定到多个类,请使用 [class] 来设置表达式。例如,[class]="classExpression"
。
表达式可以是用空格分隔的类名字符串,也可以是将类名作为键并将真或假表达式作为值的对象。对于对象格式,Angular 会在其关联的值为真时才添加类。
对于任何类似对象的表达式(例如 object、Array、Map 或 Set,必须更改对象的引用,Angular 才能更新类列表。在不更改对象引用的情况下只更新其 Attribute 是不会生效的。
如果同一类名有多个绑定,Angular 会根据样式优先级来确定要使用的绑定。
绑定到 style Attribute
使用样式绑定来动态设置样式。
绑定到单一样式
要创建对单个样式的绑定,请使用前缀 style 后跟一个点和 CSS style Attribute 的名称。
例如 [style.width]="width"
。 Angular 会将该 Attribute 设置为绑定表达式的值,这个值通常是一个字符串。(可选)你还可以添加单位扩展,例如 em 或 % ,它的值需要数字类型。
可以用中线格式或 camelCase 格式编写样式 Attribute 名。
绑定到多个样式
要切换多个样式,请绑定到 [style] Attribute,例如 [style]="styleExpression"
。该表达式通常是样式的字符串列表,例如 “width: 100px; height: 100px;” 。
还可以将表达式格式化为对象,此对象以样式名作为键、以样式值作为值,例如 {width: ‘100px’, height: ‘100px’}。
对于任何类似对象的表达式(例如 object、Array、Map 或 Set,必须更改对象的引用,Angular 才能更新类列表。在不更改对象引用的情况下更新其 Attribute 值是不会生效的。
如果同一个样式 Attribute 有多个绑定,Angular 将使用样式优先级来确定要使用的绑定。
—— END ——