下面這篇文章帶大家了解雙向綁定，看看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: 'appIput2'}">
<p>form 中input value is {{iptVal2}}</p>
</form>登入後複製
在表單元素中使用雙向綁定就是這麼簡單了，注意引入FormsModule模組就行。
總結：
1、雙向綁定的原理其實就是@Input()跟@ Output()結合使用，需要注意語法是[(屬性名稱)]=“父元件中一個屬性名稱”，先綁定輸入，再綁定輸出；
2、在form表單中使用雙向綁定，應先引入FormsModule這個內建模組，然後在input元素上添加name。
更多程式相關知識，請造訪：程式設計學習！ ！
以上是帶你了解Angular10中的雙向綁定的詳細內容。更多資訊請關注PHP中文網其他相關文章！
