填写这份《一分钟调查》,帮我们(开发组)做得更好!去填写Home

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

Attribute, class, and style bindings

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

Attribute binding in Angular helps you set values for attributes directly. With attribute binding, you can improve accessibility, style your application dynamically, and manage multiple CSS classes or styles simultaneously.

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

See the现场演练 / 下载范例for a working example containing the code snippets in this guide.

绑定到 Attribute

Binding to an attribute

建议你尽可能设置带有 Property 绑定的元素的 Property。但是,有时你没有可绑定的元素 Property。在这种情况下,可以使用 Attribute 绑定。

It is recommended that you set an element property with a property binding whenever possible. However, sometimes you don't have an element property to bind. In those situations, you can use attribute binding.

例如,ARIASVG 只有 Attribute。 ARIA 和 SVG 都不对应于元素的 Property,也不设置元素的 Property。在这些情况下,必须使用 Attribute 绑定,因为没有相应的目标 Property。

For example, ARIA and SVG are purely attributes. Neither ARIA nor SVG correspond to element properties and don't set element properties. In these cases, you must use attribute binding because there are no corresponding property targets.

语法

Syntax

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

Attribute binding syntax resembles property binding, but instead of an element property between brackets, you precede the name of the attribute with the prefix attr, followed by a dot. Then, you set the attribute value with an expression that resolves to a string.

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

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

When the expression resolves to null, Angular removes the attribute altogether.

绑定 ARIA Attribute

Binding ARIA attributes

Attribute 绑定的主要用例之一是设置 ARIA Attribute,如下所示:

One of the primary use cases for attribute binding is to set ARIA attributes, as in this example:

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

绑定到 colspan

Binding to colspan

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

Another common use case for attribute binding is with the colspan attribute in tables. Binding to the colspan attribute helps you keep your tables programmatically dynamic. Depending on the amount of data that your application populates a table with, the number of columns that a row spans could change.

要将 Attribute 绑定到 <td>colspan Attribute:

To use attribute binding with the <td> attribute colspan:

  1. 使用以下语法指定 colspan[attr.colspan]

    Specify the colspan attribute by using the following syntax: [attr.colspan].

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

    Set [attr.colspan] equal to an expression.

在下面的示例中,我们将 colspan Attribute 绑定到表达式 1 + 1

In the following example, we bind the colspan attribute to the expression 1 + 1.

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

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

This binding causes the <tr> to span two columns.

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

Sometimes there are differences between the name of property and an attribute.

colspan<tr> 的 Attribute,而 colSpan(注意 “S” 是大写)是 Property。使用 Attribute 绑定时,请使用带小写 “s” 的 colspan。有关如何绑定到 colSpan Property 的更多信息,请参见 Property 绑定 中的 colspancolSpan部分。

colspan is an attribute of <tr>, while colSpan with a capital "S" is a property. When using attribute binding, use colspan with a lowercase "s". For more information on how to bind to the colSpan property, see the colspan and colSpansection of Property Binding.


绑定到 class Attribute

Binding to the class attribute

你可以使用类绑定从元素的 class Attribute 中添加和删除 CSS 类名称。

You can use class binding to add and remove CSS class names from an element's class attribute.

绑定到单个 CSS class

Binding to a single CSS class

要创建单个类绑定,请使用前缀 class 后跟一个点和 CSS 类的名称,例如 [class.sale]="onSale"onSale 为真值时添加类,在表达式为假值时(undefined 除外)删除类。欲知详情,请参见样式委托部分。

To create a single class binding, use the prefix class followed by a dot and the name of the CSS class—for example, [class.sale]="onSale". Angular adds the class when the bound expression, onSale is truthy, and it removes the class when the expression is falsy—with the exception of undefined. See styling delegation for more information.

绑定到多个 CSS 类

Binding to multiple CSS classes

要绑定到多个类,请使用 [class] 来设置表达式 - 例如,[class]="classExpression"。表达式可以是用空格分隔的类名字符串,也可以是将类名作为键并将真或假表达式作为值的对象。对于对象格式,Angular 会在其关联的值为真时才添加类。

To bind to multiple classes, use [class] set to an expression—for example, [class]="classExpression". The expression can be a space-delimited string of class names, or an object with class names as the keys and truthy or falsy expressions as the values. With an object format, Angular adds a class only if its associated value is truthy.

对于任何类似对象的表达式(例如 objectArrayMapSet,必须更改对象的引用,Angular 才能更新类列表。在不更改对象引用的情况下只更新其 Attribute 是不会生效的。

With any object-like expression—such as object, Array, Map, or Set—the identity of the object must change for Angular to update the class list. Updating the property without changing object identity has no effect.

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

If there are multiple bindings to the same class name, Angular uses styling precedence to determine which binding to use.

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

The following table summarizes class binding syntax.

绑定类型

Binding Type

语法

Syntax

输入类型

Input Type

范例输入值

Example Input Values

单一类绑定

Single class binding

[class.sale]="onSale"boolean | undefined | nulltrue, false

多重类绑定

Multi-class binding

[class]="classExpression"string"my-class-1 my-class-2 my-class-3"
{[key: string]: boolean | undefined | null}{foo: true, bar: false}
Array<string>['foo', 'bar']

绑定到 style Attribute

Binding to the style attribute

你可以使用样式绑定来动态设置样式。

You can use style binding to set styles dynamically.

绑定到单一样式

Binding to a single style

要创建对单个样式的绑定,请使用前缀 style 后跟一个点和 CSS style Attribute 的名称,例如 [style.width]="width"。 Angular 会将该 Attribute 设置为绑定表达式的值,这个值通常是一个字符串。(可选)你还可以添加单位扩展,例如 em% ,它的值需要数字类型。

To create a single style binding, use the prefix style followed by a dot and the name of the CSS style property—for example, [style.width]="width". Angular sets the property to the value of the bound expression, which is usually a string. Optionally, you can add a unit extension like em or %, which requires a number type.

你可以用中线格式camelCase 格式编写样式 Attribute 名。

You can write a style property name in either dash-case, or camelCase.

绑定到多个样式

Binding to multiple styles

要切换多个样式,请绑定到 [style] Attribute,例如 [style]="styleExpression" 。该表达式通常是样式的字符串列表,例如 "width: 100px; height: 100px;"

To toggle multiple styles, bind to the [style] attribute—for example, [style]="styleExpression". The expression is often a string list of styles such as "width: 100px; height: 100px;".

你还可以将表达式格式化为对象,此对象以样式名作为键、以样式值作为值,例如 {width: '100px', height: '100px'}

You can also format the expression as an object with style names as the keys and style values as the values, such as {width: '100px', height: '100px'}.

对于任何类似对象的表达式(例如 objectArrayMapSet,必须更改对象的引用,Angular 才能更新类列表。在不更改对象引用的情况下更新其 Attribute 值是不会生效的。

With any object-like expression—such as object, Array, Map, or Set—the identity of the object must change for Angular to update the class list. Updating the property without changing object identity has no effect.

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

If there are multiple bindings to the same style attribute, Angular uses styling precedence to determine which binding to use.

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

The following table summarizes style binding syntax.

绑定类型

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 | null100

多重样式绑定

Multi-style binding

[style]="styleExpression"string"width: 100px; height: 100px"
{[key: string]: string | undefined | null}{width: '100px', height: '100px'}
Array<string>['width', '100px']