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

雙向繫結

Two-way binding

雙向繫結為應用中的元件提供了一種共享資料的方式。使用雙向繫結繫結來偵聽事件並在父元件和子元件之間同步更新值。

Two-way binding gives components in your application a way to share data. Use two-way binding to listen for events and update values simultaneously between parent and child components.

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

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

先決條件

Prerequisites

為了充分利用雙向繫結,你應該對以下概念有基本的瞭解:

To get the most out of two-way binding, you should have a basic understanding of the following concepts:


雙向繫結將屬性繫結與事件繫結結合在一起:

Two-way binding combines property binding with event binding:

新增雙向資料繫結

Adding two-way data binding

Angular 的雙向繫結語法是方括號和圓括號的組合 [()][] 進行屬性繫結,() 進行事件繫結,如下所示。

Angular's two-way binding syntax is a combination of square brackets and parentheses, [()]. The [()] syntax combines the brackets of property binding, [], with the parentheses of event binding, (), as follows.

src/app/app.component.html
      
      <app-sizer [(size)]="fontSizePx"></app-sizer>
    

雙向繫結工作原理

How two-way binding works

為了使雙向資料繫結有效,@Output() 屬性的名字必須遵循 inputChange 模式,其中 input 是相應 @Input() 屬性的名字。例如,如果 @Input() 屬性為 size ,則 @Output() 屬性必須為 sizeChange

For two-way data binding to work, the @Output() property must use the pattern, inputChange, where input is the name of the @Input() property. For example, if the @Input() property is size, the @Output() property must be sizeChange.

後面的 sizerComponent 具有值屬性 size 和事件屬性 sizeChangesize 屬性是 @Input(),因此資料可以流入 sizerComponentsizeChange 事件是一個 @Output() ,它允許資料從 sizerComponent 流出到父元件。

The following sizerComponent has a size value property and a sizeChange event. The size property is an @Input(), so data can flow into the sizerComponent. The sizeChange event is an @Output(), which allows data to flow out of the sizerComponent to the parent component.

接下來,有兩個方法, dec() 用於減小字型大小, inc() 用於增大字型大小。這兩種方法使用 resize() 在最小/最大值的約束內更改 size 屬性的值,併發出帶有新 size 值的事件。

Next, there are two methods, dec() to decrease the font size and inc() to increase the font size. These two methods use resize() to change the value of the size property within min/max value constraints, and to emit an event that conveys the new size value.

src/app/sizer.component.ts
      
      export class SizerComponent {

  @Input()  size!: number | string;
  @Output() sizeChange = new EventEmitter<number>();

  dec() { this.resize(-1); }
  inc() { this.resize(+1); }

  resize(delta: number) {
    this.size = Math.min(40, Math.max(8, +this.size + delta));
    this.sizeChange.emit(this.size);
  }
}
    

sizerComponent 範本有兩個按鈕,分別將 click 事件繫結到 inc()dec() 方法。當用戶單擊按鈕之一時, sizerComponent 呼叫相應的方法。 inc()dec() 這兩個方法分別使用 +1-1 呼叫 resize() 方法,它使用新的 size 值引發 sizeChange 事件。

The sizerComponent template has two buttons that each bind the click event to the inc() and dec() methods. When the user clicks one of the buttons, the sizerComponent calls the corresponding method. Both methods, inc() and dec(), call the resize() method with a +1 or -1, which in turn raises the sizeChange event with the new size value.

src/app/sizer.component.html
      
      <div>
  <button (click)="dec()" title="smaller">-</button>
  <button (click)="inc()" title="bigger">+</button>
  <label [style.font-size.px]="size">FontSize: {{size}}px</label>
</div>
    

AppComponent 範本中, fontSizePx 被雙向繫結到 SizerComponent

In the AppComponent template, fontSizePx is two-way bound to the SizerComponent.

src/app/app.component.html
      
      <app-sizer [(size)]="fontSizePx"></app-sizer>
<div [style.font-size.px]="fontSizePx">Resizable Text</div>
    

AppComponent 中,透過將 fontSizePx 的值設定為 16 來設定初始 SizerComponent.size 值。

In the AppComponent, fontSizePx establishes the initial SizerComponent.size value by setting the value to 16.

src/app/app.component.ts
      
      fontSizePx = 16;
    

單擊這些按鈕將更新 AppComponent.fontSizePx。修改後的 AppComponent.fontSizePx 值將更新樣式繫結,從而使顯示的文字變大或變小。

Clicking the buttons updates the AppComponent.fontSizePx. The revised AppComponent.fontSizePx value updates the style binding, which makes the displayed text bigger or smaller.

雙向繫結語法是屬性繫結和事件繫結的組合的簡寫形式。拆成單獨的屬性繫結和事件繫結形式的 SizerComponent 程式碼如下:

The two-way binding syntax is shorthand for a combination of property binding and event binding. The SizerComponent binding as separate property binding and event binding is as follows.

src/app/app.component.html (expanded)
      
      <app-sizer [size]="fontSizePx" (sizeChange)="fontSizePx=$event"></app-sizer>
    

$event 變數包含 SizerComponent.sizeChange 事件的資料。當用戶單擊按鈕時,Angular 將 $event 賦值給 AppComponent.fontSizePx

The $event variable contains the data of the SizerComponent.sizeChange event. Angular assigns the $event value to the AppComponent.fontSizePx when the user clicks the buttons.

表單中的雙向繫結
Two-way binding in forms

因為沒有任何原生 HTML 元素遵循了 x 值和 xChange 事件的命名模式,所以與表單元素進行雙向繫結需要使用 NgModel。關於如何在表單中使用雙向繫結的更多資訊,請參見 Angular NgModel

Because no native HTML element follows the x value and xChange event pattern, two-way binding with form elements requires NgModel. For more information on how to use two-way binding in forms, see Angular NgModel.