填寫這份《一分鐘調查》,幫我們(開發組)做得更好!去填寫Home

繫結語法:概述

Binding syntax: an overview

資料繫結是一種機制,用來協呼叫戶可見的內容,特別是應用資料的值。 雖然也可以手動從 HTML 中推送或拉取這些值,但是如果將這些任務轉交給繫結框架,應用就會更易於編寫、閱讀和維護。 你只需宣告資料來源和目標 HTML 元素之間的繫結關係就可以了,框架會完成其餘的工作。

Data-binding is a mechanism for coordinating what users see, specifically with application data values. While you could push values to and pull values from HTML, the application is easier to write, read, and maintain if you turn these tasks over to a binding framework. You simply declare bindings between binding sources, target HTML elements, and let the framework do the rest.

包含本指南中的程式碼段的工作示例,請參閱現場演練 / 下載範例

See the現場演練 / 下載範例for a working example containing the code snippets in this guide.

Angular 提供了多種資料繫結方式。繫結型別可以分為三類別,按資料流的方向分為:

Angular provides many kinds of data-binding. Binding types can be grouped into three categories distinguished by the direction of data flow:

  • 資料來源到檢視

    From the source-to-view

  • 檢視到資料來源

    From view-to-source

  • 雙向:檢視到資料來源到檢視

    Two-way sequence: view-to-source-to-view

繫結型別

Type

語法

Syntax

分類

Category

插值
屬性
Attribute
CSS 類別
樣式

Interpolation
Property
Attribute
Class
Style

{{expression}} [target]="expression" bind-target="expression"
      
      {{expression}}
[target]="expression"
bind-target="expression"
    

單向
從資料來源
到檢視

One-way
from data source
to view target

事件

Event

(target)="statement" on-target="statement"
      
      (target)="statement"
on-target="statement"
    

從檢視到資料來源的單向繫結

One-way
from view target
to data source

雙向

Two-way

[(target)]="expression" bindon-target="expression"
      
      [(target)]="expression"
bindon-target="expression"
    

雙向

Two-way

除插值以外的其它繫結型別在等號的左側都有一個“目標名稱”,由繫結符 []() 包起來, 或者帶有字首:bind-on-bindon-

Binding types other than interpolation have a target name to the left of the equal sign, either surrounded by punctuation, [] or (), or preceded by a prefix: bind-, on-, bindon-.

繫結的“目標”是繫結符內部的屬性或事件:[]()[()]

The target of a binding is the property or event inside the binding punctuation: [], () or [()].

在繫結時可以使用來源指令的每個公共成員。 你無需進行任何特殊操作即可在範本表示式或語句內訪問指令的成員。

Every public member of a source directive is automatically available for binding. You don't have to do anything special to access a directive member in a template expression or statement.

資料繫結與 HTML

Data-binding and HTML

在正常的 HTML 開發過程中,你使用 HTML 元素來建立視覺結構, 透過把字串常量設定到元素的 attribute 來修改那些元素。

In the normal course of HTML development, you create a visual structure with HTML elements, and you modify those elements by setting element attributes with string constants.

<div class="special">Plain old HTML</div> <img src="images/item.png"> <button disabled>Save</button>
      
      <div class="special">Plain old HTML</div>

<img src="images/item.png">
<button disabled>Save</button>
    

使用資料繫結,你可以控制按鈕狀態等各個方面:

With data-binding, you can control things like the state of a button:

<!-- Bind button disabled state to `isUnchanged` property --> <button [disabled]="isUnchanged">Save</button>
src/app/app.component.html
      
      <!-- Bind button disabled state to `isUnchanged` property -->
<button [disabled]="isUnchanged">Save</button>
    

請注意,這裡繫結到的是按鈕的 DOM 元素的 disabled 這個 Property,而不是 Attribute。 這是資料繫結的通用規則。資料繫結使用 DOM 元素、元件和指令的 Property,而不是 HTML 的Attribute

Notice that the binding is to the disabled property of the button's DOM element, not the attribute. This applies to data-binding in general. Data-binding works with properties of DOM elements, components, and directives, not HTML attributes.

HTML attribute 與 DOM property 的對比

HTML attribute vs. DOM property

理解 HTML 屬性和 DOM 屬性之間的區別,是瞭解 Angular 繫結如何工作的關鍵。Attribute 是由 HTML 定義的。Property 是從 DOM(文件物件模型)節點訪問的。

The distinction between an HTML attribute and a DOM property is key to understanding how Angular binding works. Attributes are defined by HTML. Properties are accessed from DOM (Document Object Model) nodes.

  • 一些 HTML Attribute 可以 1:1 對映到 Property;例如,“ id”。

    A few HTML attributes have 1:1 mapping to properties; for example, id.

  • 某些 HTML Attribute 沒有相應的 Property。例如,aria-*

    Some HTML attributes don't have corresponding properties; for example, aria-*.

  • 某些 DOM Property 沒有相應的 Attribute。例如,textContent

    Some DOM properties don't have corresponding attributes; for example, textContent.

重要的是要記住,HTML AttributeDOM Property 是不同的,就算它們具有相同的名稱也是如此。 在 Angular 中,HTML Attribute 的唯一作用是初始化元素和指令的狀態。

It is important to remember that HTML attribute and the DOM property are different things, even when they have the same name. In Angular, the only role of HTML attributes is to initialize element and directive state.

範本繫結使用的是 Property事件,而不是 Attribute

Template binding works with properties and events, not attributes.

編寫資料繫結時,你只是在和目標物件的 DOM Property事件打交道。

When you write a data-binding, you're dealing exclusively with the DOM properties and events of the target object.

該通用規則可以幫助你建立 HTML Attribute 和 DOM Property 的思維模型: 屬性負責初始化 DOM 屬性,然後完工。Property 值可以改變;Attribute 值則不能。

This general rule can help you build a mental model of attributes and DOM properties: Attributes initialize DOM properties and then they are done. Property values can change; attribute values can't.

此規則有一個例外。 可以透過 setAttribute() 來更改 Attribute,接著它會重新初始化相應的 DOM 屬性。

There is one exception to this rule. Attributes can be changed by setAttribute(), which re-initializes corresponding DOM properties.

欲知詳情,參見 MDN 介面文件,其中包含所有標準 DOM 元素及其 Property 的 API 文件。 <td> Attribute<td> Property 之間的比較是一個很有用的例子。 特別是,你可以透過 “DOM 介面” 連結從 Attribute 頁面導航到 Property 頁面,並在繼承層次中導航到 HTMLTableCellElement

For more information, see the MDN Interfaces documentation which has API docs for all the standard DOM elements and their properties. Comparing the <td> attributes to the <td> properties provides a helpful example for differentiation. In particular, you can navigate from the attributes page to the properties via "DOM interface" link, and navigate the inheritance hierarchy up to HTMLTableCellElement.

範例 1:<input>

Example 1: an <input>

當瀏覽器渲染 <input type="text" value="Sarah"> 時,它會建立一個對應的 DOM 節點,其 value Property 已初始化為 “Sarah”。

When the browser renders <input type="text" value="Sarah">, it creates a corresponding DOM node with a value property initialized to "Sarah".

<input type="text" value="Sarah">
      
      <input type="text" value="Sarah">
    

當用戶在 <input> 中輸入 Sally 時,DOM 元素的 value Property 將變為 Sally。 但是,如果使用 input.getAttribute('value') 檢視 HTML 的 Attribute value,則可以看到該 attribute 保持不變 —— 它返回了 Sarah

When the user enters "Sally" into the <input>, the DOM element value property becomes "Sally". However, if you look at the HTML attribute value using input.getAttribute('value'), you can see that the attribute remains unchanged—it returns "Sarah".

HTML 的 value 這個 attribute 指定了初始值;DOM 的 value 這個 property 是當前值。

The HTML attribute value specifies the initial value; the DOM value property is the current value.

要透過可執行的應用檢視 Attribute 和 DOM Property 的差別,請參閱現場演練 / 下載範例,特別注意其繫結語法。

To see attributes versus DOM properties in a functioning app, see the現場演練 / 下載範例especially for binding syntax.

範例 2:禁用按鈕

Example 2: a disabled button

disabled Attribute 是另一個例子。按鈕的 disabled Property 預設為 false,因此按鈕是啟用的。

The disabled attribute is another example. A button's disabled property is false by default so the button is enabled.

當你新增 disabled Attribute 時,僅僅它的出現就將按鈕的 disabled Property 初始化成了 true,因此該按鈕就被禁用了。

When you add the disabled attribute, its presence alone initializes the button's disabled property to true so the button is disabled.

<button disabled>Test Button</button>
      
      <button disabled>Test Button</button>
    

新增和刪​​除 disabled Attribute 會禁用和啟用該按鈕。 但是,Attribute 的值無關緊要,這就是為什麼你不能透過編寫 <button disabled="false">仍被禁用</button> 來啟用此按鈕的原因。

Adding and removing the disabled attribute disables and enables the button. However, the value of the attribute is irrelevant, which is why you cannot enable a button by writing <button disabled="false">Still Disabled</button>.

要控制按鈕的狀態,請設定 disabled Property

To control the state of the button, set the disabled property,

雖然技術上說你可以設定 [attr.disabled] 屬性繫結,但是它們的值是不同的,Property 繫結要求一個布林值,而其相應的 Attribute 繫結則取決於該值是否為 null。例子如下:

Though you could technically set the [attr.disabled] attribute binding, the values are different in that the property binding requires to be a boolean value, while its corresponding attribute binding relies on whether the value is null or not. Consider the following:

<input [disabled]="condition ? true : false"> <input [attr.disabled]="condition ? 'disabled' : null">
      
      <input [disabled]="condition ? true : false">
<input [attr.disabled]="condition ? 'disabled' : null">
    

通常,要使用 Property 繫結而不是 Attribute 繫結,因為它更直觀(是一個布林值),語法更短,並且效能更高。

Generally, use property binding over attribute binding as it is more intuitive (being a boolean value), has a shorter syntax, and is more performant.

要透過可執行的應用檢視 disabled 按鈕示例,請參見現場演練 / 下載範例,特別注意其繫結語法。本示例展示了如何從元件中切換禁用屬性。

To see the disabled button example in a functioning app, see the現場演練 / 下載範例especially for binding syntax. This example shows you how to toggle the disabled property from the component.

繫結型別和目標

Binding types and targets

資料繫結的目標是 DOM 中的某些東西。根據繫結型別,目標可以是屬性(元素,元件或指令),事件(元素,元件或指令)或有時是屬性名稱。下表總結了不同繫結型別的目標。

The target of a data-binding is something in the DOM. Depending on the binding type, the target can be a property (element, component, or directive), an event (element, component, or directive), or sometimes an attribute name. The following table summarizes the targets for the different binding types.

型別

Type

目標

Target

範例

Examples

屬性

Property

元素屬性
元件屬性
指令屬性

Element property
Component property
Directive property

srcherongClass,程式碼如下:

<img [src]="heroImageUrl"> <app-hero-detail [hero]="currentHero"></app-hero-detail> <div [ngClass]="{'special': isSpecial}"></div>
      
      <img [src]="heroImageUrl">
<app-hero-detail [hero]="currentHero"></app-hero-detail>
<div [ngClass]="{'special': isSpecial}"></div>
    

src, hero, and ngClass in the following:

<img [src]="heroImageUrl"> <app-hero-detail [hero]="currentHero"></app-hero-detail> <div [ngClass]="{'special': isSpecial}"></div>
      
      <img [src]="heroImageUrl">
<app-hero-detail [hero]="currentHero"></app-hero-detail>
<div [ngClass]="{'special': isSpecial}"></div>
    

事件

Event

元素事件
元件事件
指令事件

Element event
Component event
Directive event

clickdeleteRequestmyClick,程式碼如下:

<button (click)="onSave()">Save</button> <app-hero-detail (deleteRequest)="deleteHero()"></app-hero-detail> <div (myClick)="clicked=$event" clickable>click me</div>
      
      <button (click)="onSave()">Save</button>
<app-hero-detail (deleteRequest)="deleteHero()"></app-hero-detail>
<div (myClick)="clicked=$event" clickable>click me</div>
    

click, deleteRequest, and myClick in the following:

<button (click)="onSave()">Save</button> <app-hero-detail (deleteRequest)="deleteHero()"></app-hero-detail> <div (myClick)="clicked=$event" clickable>click me</div>
      
      <button (click)="onSave()">Save</button>
<app-hero-detail (deleteRequest)="deleteHero()"></app-hero-detail>
<div (myClick)="clicked=$event" clickable>click me</div>
    

雙向

Two-way

事件與屬性

Event and property

<input [(ngModel)]="name">
      
      <input [(ngModel)]="name">
    
Attribute

Attribute (少數特例情況)

Attribute (the exception)

<button [attr.aria-label]="help">help</button>
      
      <button [attr.aria-label]="help">help</button>
    

類別

Class

class 屬性

class property

<div [class.special]="isSpecial">Special</div>
      
      <div [class.special]="isSpecial">Special</div>
    

樣式

Style

style 屬性

style property

<button [style.color]="isSpecial ? 'red' : 'green'">
      
      <button [style.color]="isSpecial ? 'red' : 'green'">