Angular10中雙向綁定的示例分析
這篇文章主要介紹了Angular10中雙向綁定的示例分析，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。
讓客戶滿意是我們工作的目標，不斷超越客戶的期望值來自于我們對這個行業的熱愛。我們立志把好的技術通過有效、簡單的方式提供給客戶，將通過不懈努力成為客戶在信息化領域值得信任、有價值的長期合作伙伴，公司提供的服務項目有：申請域名、雅安服務器托管、營銷軟件、網站建設、張家川回族自治網站維護、網站推廣。
將利用@Input()和@Output()來了解下雙向綁定。
定義：雙向綁定為應用中的組件提供了一種共享數據的方式。使用雙向綁定綁定來偵聽事件并在父組件和子組件之間同步更新值。(其實，也就是對@Input()跟@Output()的一種簡化)
雙向綁定大致可以分成兩種類型：
一、普通組件的雙向綁定
這個類型的雙向綁定可以發生在任何組件任何DOM元素上，下面我們通過一個實例來具體認識一下。
在src/app/components/下面創建一個sizer組件作為子組件：
// src/app/components/sizer/sizer.component.html
-
+
FontSize: {{size}}px
// 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）
子組件修改后的FontSize： {{appFontSize}}
// 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();
....
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
子組件修改后的FontSize： {{appFontSize}}
// src/app/components/sizer/sizer.component.ts
...
export class SizerComponent implements OnInit {
@Input() size: number | string;
// 修改事件名,********必須是：屬性名 + Change 形式*********
@Output() sizeChange = new EventEmitter();
....
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
],
// ...
})組件中使用：
input value is {{iptVal}}
上面這行代碼相當于：
這其實很簡單的，類似vue里面的寫法。
在標簽中使用
將代碼放入
但是，我們會發現瀏覽器會報錯：
報錯意思說，在form表單中使用ngModel的話，我們需要給input添加一個name屬性或者設置[ngModelOptions]="{standalone: true}"
修改代碼：
或者：
或者：
在表單元素 中使用雙向綁定就是這么簡單了，注意引入FormsModule模塊就行。
感謝你能夠認真閱讀完這篇文章，希望小編分享的“Angular10中雙向綁定的示例分析”這篇文章對大家有幫助，同時也希望大家多多支持創新互聯，關注創新互聯行業資訊頻道，更多相關知識等著你來學習!
當前文章：Angular10中雙向綁定的示例分析
本文URL：
http://m.jcarcd.cn/article/jieecc.html
