Angular 雙向綁定

雙向綁定

雙向綁定為應(yīng)用中的組件提供了一種共享數(shù)據(jù)的方式。使用雙向綁定綁定來偵聽事件并在父組件和子組件之間同步更新值。

包含本指南中的代碼片段的可工作示例參見現(xiàn)場演練 / 下載范例。

先決條件

為了充分利用雙向綁定，你應(yīng)該對以下概念有基本的了解：

• 屬性綁定
• 事件綁定
• 輸入和輸出

雙向綁定將屬性綁定與事件綁定結(jié)合在一起：

• 屬性綁定設(shè)置特定的元素屬性。
• 事件綁定偵聽元素更改事件。

添加雙向數(shù)據(jù)綁定

Angular 的雙向綁定語法是方括號和圓括號的組合 ?[()]?。?[]? 進(jìn)行屬性綁定，?()? 進(jìn)行事件綁定，如下所示。

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

雙向綁定工作原理

為了使雙向數(shù)據(jù)綁定有效，?@Output()? 屬性的名字必須遵循 ?inputChange ?模式，其中 ?input ?是相應(yīng) ?@Input()? 屬性的名字。例如，如果 ?@Input()? 屬性為 ?size ?，則 ?@Output()? 屬性必須為 ?sizeChange ?。

后面的 ?sizerComponent ?具有值屬性 ?size ?和事件屬性 ?sizeChange?。 ?size ?屬性是 ?@Input()?，因此數(shù)據(jù)可以流入 ?sizerComponent ?。 ?sizeChange ?事件是一個(gè) ?@Output()? ，它允許數(shù)據(jù)從 ?sizerComponent ?流出到父組件。

接下來，有兩個(gè)方法， ?dec()? 用于減小字體大小， ?inc()? 用于增大字體大小。這兩種方法使用 ?resize()? 在最小/最大值的約束內(nèi)更改 ?size ?屬性的值，并發(fā)出帶有新 ?size ?值的事件。

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 ?模板有兩個(gè)按鈕，分別將 click 事件綁定到 ?inc()? 和 ?dec()? 方法。當(dāng)用戶單擊按鈕之一時(shí)， ?sizerComponent ?調(diào)用相應(yīng)的方法。 ?inc()? 和 ?dec()? 這兩個(gè)方法分別使用 +1 或 -1 調(diào)用 ?resize()? 方法，它使用新的 size 值引發(fā) ?sizeChange ?事件。

<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 ?。

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

在 ?AppComponent ?中，通過將 ?fontSizePx ?的值設(shè)置為 16 來設(shè)置初始 ?SizerComponent.size? 值。

fontSizePx = 16;

單擊這些按鈕將更新 ?AppComponent.fontSizePx?。修改后的 ?AppComponent.fontSizePx? 值將更新樣式綁定，從而使顯示的文本變大或變小。

雙向綁定語法是屬性綁定和事件綁定的組合的簡寫形式。拆成單獨(dú)的屬性綁定和事件綁定形式的 ?SizerComponent ?代碼如下：

<app-sizer [size]="fontSizePx" (sizeChange)="fontSizePx=$event"></app-sizer>

?$event? 變量包含 ?SizerComponent.sizeChange? 事件的數(shù)據(jù)。當(dāng)用戶單擊按鈕時(shí)，Angular 將 ?$event? 賦值給 ?AppComponent.fontSizePx?。

表單中的雙向綁定
因?yàn)闆]有任何原生 HTML 元素遵循了 ?x? 值和 ?xChange ?事件的命名模式，所以與表單元素進(jìn)行雙向綁定需要使用 ?NgModel?。