Attribute 绑定

Angular 中的 Attribute 绑定可帮助你直接设置 Attribute 值。使用 Attribute 绑定，你可以提升无障碍性、动态设置应用程序样式以及同时管理多个 CSS 类或样式。

包含本指南中的代码片段的可工作示例，请参阅现场演练/ 下载范例 。

前提条件

• property 绑定

语法

Attribute 绑定语法类似于 Property 绑定 ，但不是直接在方括号之间放置元素的 Property，而是在 Attribute 名称前面加上前缀 attr，后跟一个点 .。然后，使用解析为字符串的表达式设置 Attribute 值。

<p [attr.attribute-you-are-targeting]="expression"></p>

TIP

当表达式解析为 null或 undefined时，Angular 会完全删除该 Attribute。

绑定 ARIA Attribute

Attribute 绑定的主要用例之一是设置 ARIA Attribute。

要绑定到 ARIA Attribute，请键入以下内容：

src/app/app.component.html

<!-- create and set an aria attribute for assistive technology -->
<button type="button" [attr.aria-label]="actionName">{{actionName}} with Aria</button>

绑定到 colspan

Attribute 绑定的另一个常见用例是绑定到表格中的 colspanAttribute。colspanAttribute 可帮助你以编程方式让表格保持动态。根据应用中用来填充表的数据量，某一行要跨越的列数可能会发生变化。

要将 Attribute 绑定到 <td>的 colspanAttribute

• 使用以下语法指定 colspan：[attr.colspan]。

• 将 [attr.colspan]设置为等于某个表达式。

在下面的示例中，我们将 colspanAttribute 绑定到表达式 1 + 1。

src/app/app.component.html

<!--  expression calculates colspan=2 -->
<tr><td [attr.colspan]="1 + 1">One-Two</td></tr>

此绑定会导致 <tr>跨越两列。

TIP

有时，Property 名和 Attribute 名之间存在差异。

colspan是 <td>的 Attibute，而带有大写 "S" 的 colSpan是 Property。使用 Attribute 绑定时，请使用带有小写“s”的 colspan。

有关如何绑定到 colSpanProperty 的更多信息，参阅 Property 绑定 中的 colspan 和 colSpan 部分。

下一步呢？

• 类和样式绑定