這篇文章主要介紹了Angular10中雙向綁定的示例分析，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

讓客戶(hù)滿(mǎn)意是我們工作的目標(biāo)，不斷超越客戶(hù)的期望值來(lái)自于我們對(duì)這個(gè)行業(yè)的熱愛(ài)。我們立志把好的技術(shù)通過(guò)有效、簡(jiǎn)單的方式提供給客戶(hù)，將通過(guò)不懈努力成為客戶(hù)在信息化領(lǐng)域值得信任、有價(jià)值的長(zhǎng)期合作伙伴，公司提供的服務(wù)項(xiàng)目有：申請(qǐng)域名、雅安服務(wù)器托管、營(yíng)銷(xiāo)軟件、網(wǎng)站建設(shè)、張家川回族自治網(wǎng)站維護(hù)、網(wǎng)站推廣。

將利用@Input()和@Output()來(lái)了解下雙向綁定。

定義：雙向綁定為應(yīng)用中的組件提供了一種共享數(shù)據(jù)的方式。使用雙向綁定綁定來(lái)偵聽(tīng)事件并在父組件和子組件之間同步更新值。(其實(shí)，也就是對(duì)@Input()跟@Output()的一種簡(jiǎn)化)

雙向綁定大致可以分成兩種類(lèi)型：

一、普通組件的雙向綁定

這個(gè)類(lèi)型的雙向綁定可以發(fā)生在任何組件任何DOM元素上，下面我們通過(guò)一個(gè)實(shí)例來(lái)具體認(rèn)識(shí)一下。

在src/app/components/下面創(chuàng)建一個(gè)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--;
  }
}

但是，這并不是我們想要的結(jié)果，我們需要從父組件傳入size，從而讓sizer組件改變字體大小。并且，通過(guò)sizer組件的按鈕點(diǎn)擊事件，將改變后的size的值回傳給父組件。

接下來(lái)我們將使用前面的知識(shí)來(lái)改造代碼（也就是雙向綁定的原理介紹）：

// src/app/app.component.html
// 下面的$event就是子組件傳過(guò)來(lái)的值（必須是$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 {
  // 創(chuàng)建輸入屬性size，為number或字符串類(lèi)型
  @Input() size: number | string;
  // 創(chuàng)建自定義事件onSizeChange，需要一個(gè)number類(lèi)型的參數(shù)
  @Output() onSizeChange = new EventEmitter<number>();
  ....
  dec() {
    this.resize(-1);
  }
  inc() {
    this.resize(1);
  }
  resize(step: number) {
    // 設(shè)置字體大小為12～40之間的值
    this.size = Math.min(40, Math.max(12, +this.size + step));
    // 通過(guò)事件傳值
    this.onSizeChange.emit(this.size);
  }
}

同樣實(shí)現(xiàn)了我們想要的效果：

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

Angular 的雙向綁定語(yǔ)法是方括號(hào)和圓括號(hào)的組合 [()]。[] 進(jìn)行屬性綁定，() 進(jìn)行事件綁定。修改下面代碼：

// 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);
  }
}

會(huì)發(fā)現(xiàn)，功能沒(méi)有受影響。

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

根據(jù)之前基本的雙向綁定知識(shí)，[(ngModel)]語(yǔ)法可拆解為：

1.名為ngModel的輸入屬性

2.名為ngModelChange的輸出屬性

單獨(dú)使用表單元素

首先需要引入FormsModule這個(gè)內(nèi)置模塊：

// 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>

上面這行代碼相當(dāng)于：

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

這其實(shí)很簡(jiǎn)單的，類(lèi)似vue里面的寫(xiě)法。

在標(biāo)簽中使用

將代碼放入<form>標(biāo)簽內(nèi)：

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

但是，我們會(huì)發(fā)現(xiàn)瀏覽器會(huì)報(bào)錯(cuò)：

報(bào)錯(cuò)意思說(shuō)，在form表單中使用ngModel的話(huà)，我們需要給input添加一個(gè)name屬性或者設(shè)置[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>

在表單元素 中使用雙向綁定就是這么簡(jiǎn)單了，注意引入FormsModule模塊就行。

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“Angular10中雙向綁定的示例分析”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!

網(wǎng)站欄目：Angular10中雙向綁定的示例分析
鏈接URL：http://www.rwnh.cn/article22/jieecc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供建站公司、App設(shè)計(jì)、網(wǎng)站導(dǎo)航、網(wǎng)站制作、靜態(tài)網(wǎng)站、網(wǎng)站策劃

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀(guān)點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)