您好,登錄后才能下訂單哦!
[(ngModel)]拆分
[(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)]用到非表單類的原生元素或第三方自定義組件上,除非寫一個(gè)合適的值訪問器,這種技巧超出了本章的范圍。
Angular文檔中描述到這里,就中止了。剛好我要定制一個(gè)模擬radio的組件,只能如文檔所說,依葫蘆畫瓢實(shí)現(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.
簡而言之,實(shí)現(xiàn)了這個(gè)接口的組件,就可以使用 Angular forms API,比如[(ngModel)]
。
interface ControlValueAccessor { writeValue(obj: any): void registerOnChange(fn: any): void registerOnTouched(fn: any): void setDisabledState(isDisabled: boolean)?: void }
實(shí)現(xiàn)ControlValueAccessor步驟
模仿primeng
中的自定義radio組件,寫了一個(gè)簡單的自定義radio組件。
RADIO_VALUE_ACCESSOR
常量用來在組件中注冊NG_VALUE_ACCESSOR
ControlValueAccessor
中的3+1個(gè)方法完整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: ` <div class="p-radio"> <label class="radio-label" (click)="select()" *ngIf="label"> <div class="name" [class.checked-name]="rb.checked">{{label}}</div> </label> <div class="helper-hidden-accessible"> <input #rb type="radio" [attr.name]="name" [attr.value]="value" [checked]="checked"> </div> <div class="radio-md" (click)="handleClick()"> <div class="radio-icon " [class.radio-checked]="rb.checked"> <div class="radio-inner"></div> </div> </div> </div> `, 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<any> = 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 { }
方法何時(shí)被調(diào)用?
writeValue(obj: any): void
API中提到 (model -> view) 時(shí),writeValue()
會(huì)被調(diào)用。
model value 和 view value分別指什么?
舉個(gè)調(diào)用PRadioComponent
的例子:
這里checkedValue
屬性就是model value,view value 為PRadioComponent
內(nèi)部的某個(gè)屬性(PRadioComponent
中定義為this.value
)。
當(dāng)model view(checkedValue
)發(fā)生改變時(shí),PRadioComponent
中的writeValue(obj: any)
就會(huì)被調(diào)用,參數(shù)為當(dāng)前model value(checkedValue
)的值,在函數(shù)中將參數(shù)值賦給內(nèi)部的view value,從而實(shí)現(xiàn)(model -> view)。接受到model value的值后,改變PRadioComponent
的UI顯示。
registerOnChange(fn: any): void
這個(gè)方法的作用是同步 view value 和 model value (view -> model),
registerOnChange(fn: Function): void { this.onModelChange = fn; }
調(diào)用this.onModelChange()
時(shí)候,將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)]
,所以這兩個(gè)方法沒有用到。registerOnTouched(fn: any)
必須實(shí)現(xiàn),所以定義了一個(gè)空函數(shù)。
實(shí)際效果
初始值為'a'
,點(diǎn)擊改變view value,在Angury調(diào)試工具中看到值改為'b'
。然后在調(diào)試工具中將checkedValue
改為'a'
,視圖發(fā)生了改變??梢?,完成了數(shù)據(jù)的雙向綁定。
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持億速云。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。