[(ngModel)]拆分

成都創(chuàng)新互聯(lián)網(wǎng)絡(luò)公司擁有十年的成都網(wǎng)站開發(fā)建設(shè)經(jīng)驗，近1000家客戶的共同信賴。提供網(wǎng)站設(shè)計、網(wǎng)站制作、網(wǎng)站開發(fā)、網(wǎng)站定制、賣友情鏈接、建網(wǎng)站、網(wǎng)站搭建、成都響應(yīng)式網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計師打造企業(yè)風(fēng)格，提供周到的售前咨詢和貼心的售后服務(wù)

[(ngModel)] 將[]輸入()輸出組合起來，進(jìn)行雙向數(shù)據(jù)綁定。拆分開來

• 輸入屬性
• [ngModel](ngModelChange)輸出監(jiān)聽元素值的變化，并同步view value與model value。

 model: string;
  constructor() {
    this.model = 'model init';
  }

  getModelChange(event: string) {
    this.model = event; // view value 與 model value 同步
  }

自定義組件上使用 [(ngModel)]

我們不能把[(ngModel)]用到非表單類的原生元素或第三方自定義組件上，除非寫一個合適的值訪問器，這種技巧超出了本章的范圍。

Angular文檔中描述到這里，就中止了。剛好我要定制一個模擬radio的組件，只能如文檔所說，依葫蘆畫瓢實現(xiàn) ControlValueAccessor。

ControlValueAccessor接口

ControlValueAccessor acts as a bridge between the Angular forms API and a native element in the DOM.
Implement this interface if you want to create a custom form control directive that integrates with Angular forms.

簡而言之，實現(xiàn)了這個接口的組件，就可以使用 Angular forms API，比如[(ngModel)] 。

interface ControlValueAccessor { 
 writeValue(obj: any): void
 registerOnChange(fn: any): void
 registerOnTouched(fn: any): void
 setDisabledState(isDisabled: boolean)?: void
}

實現(xiàn)ControlValueAccessor步驟

模仿primeng中的自定義radio組件，寫了一個簡單的自定義radio組件。

• 創(chuàng)建一個RADIO_VALUE_ACCESSOR常量用來在組件中注冊NG_VALUE_ACCESSOR
• 實現(xiàn)ControlValueAccessor中的3+1個方法

完整demo代碼如下：

import { NgModule, Component, Input, Output, ElementRef, OnInit, EventEmitter, forwardRef, ViewChild, ChangeDetectorRef } from '@angular/core';
import { CommonModule } from '@angular/common';
import { NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms';

const RADIO_VALUE_ACCESSOR: any = {
 provide: NG_VALUE_ACCESSOR,
 useExisting: forwardRef(() => PRadioComponent),
 multi: true
};

@Component({
 selector: 'app-p-radio',
 template: `
    

      
        
{{label}}
      
      

        
      
      

        

           

        
      
    
  `,
 styleUrls: ['./p-radio.component.scss'],
 providers: [RADIO_VALUE_ACCESSOR]
})
export class PRadioComponent implements ControlValueAccessor {

 @Input() name: string;
 @Input() label: string;
 @Input() value: string;
 checked: boolean;

 @ViewChild('rb') inputViewChild: ElementRef;
 @Output() pRadioChange: EventEmitter = new EventEmitter();
 onModelChange: Function = () => { };

 constructor(
  private cd: ChangeDetectorRef
 ) { }

 // model view -> view value
 writeValue(value: any): void {
  if (value) {
   this.checked = (value === this.value);
   if (this.inputViewChild.nativeElement) {
    this.inputViewChild.nativeElement.checked = this.checked;
   }
   this.cd.markForCheck();
  }
 }

 // view value ->model value
 registerOnChange(fn: Function): void {
  this.onModelChange = fn;
 }

 registerOnTouched(fn: Function): void { }

 handleClick() {
  this.select();
 }

 select() {
  this.inputViewChild.nativeElement.checked = !this.inputViewChild.nativeElement.checked;
  this.checked = !this.checked;
  if (this.checked) {
   this.onModelChange(this.value); // 同步view value 和 model value
  } else {
   this.onModelChange(null);
  }
  this.pRadioChange.emit(null);
 }

}

@NgModule({
 imports: [CommonModule],
 exports: [PRadioComponent],
 declarations: [PRadioComponent]
})

export class RadioButtonModule { }

方法何時被調(diào)用？

writeValue(obj: any): void

API中提到 (model -> view) 時，writeValue() 會被調(diào)用。
model value 和 view value分別指什么？
舉個調(diào)用PRadioComponent的例子：

這里checkedValue屬性就是model value，view value 為PRadioComponent內(nèi)部的某個屬性（PRadioComponent中定義為this.value）。

當(dāng)model view（checkedValue）發(fā)生改變時，PRadioComponent中的writeValue(obj: any)就會被調(diào)用，參數(shù)為當(dāng)前model value（checkedValue）的值，在函數(shù)中將參數(shù)值賦給內(nèi)部的view value，從而實現(xiàn)(model -> view)。接受到model value的值后，改變PRadioComponent的UI顯示。

registerOnChange(fn: any): void

這個方法的作用是同步 view value 和 model value (view -> model)，

 registerOnChange(fn: Function): void {
  this.onModelChange = fn;
 }

調(diào)用this.onModelChange()時候，將view value當(dāng)作參數(shù)傳入此方法中，即完成了同步，此例子中this.onModelChange(this.value);。

上面兩種方法是相對的：

• writeValue(obj: any): model value發(fā)生改變 ，完成后UI發(fā)生改變(model value-> view value)
• registerOnChange(fn: any): 觸發(fā)事件（比如click），view value和UI發(fā)生改變，完成調(diào)用后model value與view value同步(view value-> model value)

registerOnTouched(fn: any): void

setDisabledState(isDisabled: boolean)?: void

目的只為在控件中簡單的使用[(ngModel)]，所以這兩個方法沒有用到。registerOnTouched(fn: any)必須實現(xiàn)，所以定義了一個空函數(shù)。

實際效果

初始值為'a'，點擊改變view value，在Angury調(diào)試工具中看到值改為'b'。然后在調(diào)試工具中將checkedValue改為'a'，視圖發(fā)生了改變?？梢姡瓿闪藬?shù)據(jù)的雙向綁定。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。