当前位置：首页 > 编程日记 > 正文

Attribute 绑定、类绑定和样式绑定

编程日记 2024-05-30 05:10:00

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：
1. 使用以下语法指定 colspan：[attr.colspan] 。
2. 将 [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 ——

https://www.dkcj.cn/info/8467.html