填寫這份《一分鐘調查》,幫我們(開發組)做得更好!去填寫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']