雙向繫結
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
先決條件
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:
屬性繫結設定特定的元素屬性。
Property binding sets a specific element property.
事件繫結偵聽元素更改事件。
Event binding listens for an element change event.
新增雙向資料繫結
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.
<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
和事件屬性 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.
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.
<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
.
<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
.
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.
<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.
因為沒有任何原生 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.