繫結語法：概述link

Binding syntax: an overviewlink

資料繫結是一種機制，用來協呼叫戶可見的內容，特別是應用資料的值。 雖然也可以手動從 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.

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

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

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

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

除插值以外的其它繫結型別在等號的左側都有一個“目標名稱”，由繫結符 [] 或 () 包起來， 或者帶有字首：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.

資料繫結與 HTMLlink

Data-binding and HTMLlink

在正常的 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.

      
        content_copy
      
      <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:

      
        content_copy
      
      <!-- 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 的對比link

HTML attribute vs. DOM propertylink

理解 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 Attribute 和 DOM 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.

欲知詳情，參見 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>link

Example 1: an <input>link

當瀏覽器渲染 <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".

      
        content_copy
      
      <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：禁用按鈕link

Example 2: a disabled buttonlink

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.

      
        content_copy
      
      <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,

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

要透過可執行的應用檢視 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.

繫結型別和目標link

Binding types and targetslink

資料繫結的目標是 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.

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

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

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

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

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

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

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

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