帶你了解Angular10中的雙向綁定

下面這篇文章帶大家了解雙向綁定，看看Angular中兩種類型的雙向綁定，希望對大家有幫助！

前面我們了解了屬性綁定、事件綁定、以及輸入和輸出的使用，是時候了解雙向綁定了。本節，我們將利用@Input()和@Output()來了解下雙向綁定。 【相關教學推薦：《angular教學》】

#定義：雙向綁定為應用程式中的元件提供了一種共享資料的方式。使用雙向綁定綁定來偵聽事件並在父元件和子元件之間同步更新值。 (其實，也就是對@Input()跟@Output()的一種簡化)

雙向綁定大致可以分成兩種類型：

一、普通元件的雙向綁定

這個類型的雙向綁定可以發生在任何元件任何DOM元素上，下面我們透過一個實例來具體認識一下。

在src/app/components/下面建立一個sizer元件作為子元件：

// src/app/components/sizer/sizer.component.html
<div>
  <button class="btn btn-danger" (click)="dec()" title="smaller">-</button>
  <button class="btn btn-primary" (click)="inc()" title="bigger">+</button>
  <label [style.font-size.px]="size">FontSize: {{size}}px</label>
</div>
// src/app/components/sizer/sizer.component.ts
...
export class SizerComponent implements OnInit {
  public size = 14;
  // ...
  dec() {
    this.size++;
  }
  inc() {
    this.size--;
  }
}

頁面將是這樣，且按鈕功能實現：

但是，這並不是我們想要的結果，我們需要從父元件傳入size，從而讓 sizer元件改變字體大小。並且，透過sizer元件的按鈕點選事件，將改變後的size的值回傳給父元件。

接下來我們將使用前面的知識來改造程式碼（也就是雙向綁定的原理介紹）：

// src/app/app.component.html
// 下面的$event就是子组件传过来的值（必须是$event）
<app-sizer [size]="appFontSize" (onSizeChange)="appFontSize = $event"></app-sizer>
<div [style.font-size.px]="appFontSize">子组件修改后的FontSize： {{appFontSize}}</div>

// src/app/app.component.ts
...
export class AppComponent {
  appFontSize = 14;
}

// src/app/components/sizer/sizer.component.ts
...
export class SizerComponent implements OnInit {
  // 创建输入属性size，为number或字符串类型
  @Input() size: number | string;
  // 创建自定义事件onSizeChange，需要一个number类型的参数
  @Output() onSizeChange = new EventEmitter<number>();
  ....
  dec() {
    this.resize(-1);
  }
  inc() {
    this.resize(1);
  }
  resize(step: number) {
    // 设置字体大小为12～40之间的值
    this.size = Math.min(40, Math.max(12, +this.size + step));
    // 通过事件传值
    this.onSizeChange.emit(this.size);
  }
}

同樣實現了我們想要的效果：

但是，這樣是不是太麻煩了一點呢？下面，我們的雙向綁定正式出場：

Angular 的雙向綁定語法是方括號和圓括號的組合 [()]。 [] 進行屬性綁定，() 進行事件綁定。修改下面程式碼：

// src/app/app.component.html
<app-sizer [(size)]="appFontSize"></app-sizer>
<div [style.font-size.px]="appFontSize">子组件修改后的FontSize： {{appFontSize}}</div>

// src/app/components/sizer/sizer.component.ts
...
export class SizerComponent implements OnInit {
  @Input() size: number | string;
  // 修改事件名,********必须是：属性名 + Change 形式*********
  @Output() sizeChange = new EventEmitter<number>();
  ....
  resize(step: number) {
    this.size = Math.min(40, Math.max(12, +this.size + step));
    this.sizeChange.emit(this.size);
  }
}

會發現，功能沒有受影響。

二、表單中的雙向綁定[(ngModel)]

根據先前基本的雙向綁定知識，[(ngModel)]語法可拆解為：

#1.名為ngModel的輸入屬性

2.名為ngModelChange的輸出屬性

單獨使用表單元素

首先需要引入FormsModule這個內建模組：

// src/app/app.module.ts 
import {FormsModule} from '@angular/forms';
...
@NgModule({
  // ...
  imports: [
    // ...
    FormsModule
  ],
  // ...
})

元件中使用：

<!-- src/app/app.component.html -->
<input type="text" [(ngModel)]="iptVal">
<p>input value is {{iptVal}}</p>

上面這行程式碼相當於：

<input [value]="iptVal" (input)="iptVal = $event.target.value" />

這其實很簡單的，類似vue裡面的寫法。

在標籤中使用

將程式碼放入<form>標籤內：

<!-- src/app/app.component.html -->
<form>
  <input type="text" [(ngModel)]="iptVal2">
  <p>form 中input value is {{iptVal2}}</p>
</form>

但是，我們會發現瀏覽器會報錯：

# 報錯意思說，在form表單中使用ngModel的話，我們需要為input新增一個name屬性或設定[ngModelOptions]="{standalone: true}"

修改程式碼：

<!-- src/app/app.component.html -->
<form>
  <input type="text" [(ngModel)]="iptVal2" name="appIput2">
  <p>form 中input value is {{iptVal2}}</p>
</form>

或：

<!-- src/app/app.component.html -->
<form>
  <input type="text" [(ngModel)]="iptVal2" [ngModelOptions]="{standalone: true}">
  <p>form 中input value is {{iptVal2}}</p>
</form>

或：

<!-- src/app/app.component.html -->
<form>
  <input type="text" [(ngModel)]="iptVal2" [ngModelOptions]="{name: &#39;appIput2&#39;}">
  <p>form 中input value is {{iptVal2}}</p>
</form>

在表單元素中使用雙向綁定就是這麼簡單了，注意引入FormsModule模組就行。

總結：

1、雙向綁定的原理其實就是@Input()跟@ Output()結合使用，需要注意語法是[(屬性名稱)]=“父元件中一個屬性名稱”，先綁定輸入，再綁定輸出；

2、在form表單中使用雙向綁定，應先引入FormsModule這個內建模組，然後在input元素上添加name。

更多程式相關知識，請造訪：程式設計學習！ ！

以上是帶你了解Angular10中的雙向綁定的詳細內容。更多資訊請關注PHP中文網其他相關文章！