Angular 雙向綁定

2022-06-30 11:44 更新

雙向綁定

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

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

先決條件

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

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

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

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

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

Angular 的雙向綁定語(yǔ)法是方括號(hào)和圓括號(hào)的組合 ?[()]?。?[]? 進(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 ?流出到父組件。

接下來(lái),有兩個(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)用戶(hù)單擊按鈕之一時(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 ?中,通過(guò)將 ?fontSizePx ?的值設(shè)置為 16 來(lái)設(shè)置初始 ?SizerComponent.size? 值。

fontSizePx = 16;

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

雙向綁定語(yǔ)法是屬性綁定和事件綁定的組合的簡(jiǎn)寫(xiě)形式。拆成單獨(dú)的屬性綁定和事件綁定形式的 ?SizerComponent ?代碼如下:

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

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

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


以上內(nèi)容是否對(duì)您有幫助:
在線(xiàn)筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)