雙向繫結link

Two-way bindinglink

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

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.

先決條件link

Prerequisiteslink

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

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

• 屬性繫結

  Property binding

• 事件繫結

  Event binding

• 輸入和輸出

  Inputs and Outputs

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

Two-way binding combines property binding with event binding:

• 屬性繫結設定特定的元素屬性。

  Property binding sets a specific element property.

• 事件繫結偵聽元素更改事件。

  Event binding listens for an element change event.

新增雙向資料繫結link

Adding two-way data bindinglink

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.

      
        content_copy
      
      <app-sizer [(size)]="fontSizePx"></app-sizer>
    

雙向繫結工作原理link

How two-way binding workslink

為了使雙向資料繫結有效，@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 和事件屬性 sizeChange。 size 屬性是 @Input()，因此資料可以流入 sizerComponent 。 sizeChange 事件是一個 @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.

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

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

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

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

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