@angular/forms里有個(gè)接口用來實(shí)現(xiàn)支持[(ngModel)]，具體可查ControlValueAccessor，這邊還未深入理解只是為了開發(fā)組件而初步了解

interface ControlValueAccessor {writeValue(obj: any): voidregisterOnChange(fn: any): voidregisterOnTouched(fn: any): void}

我們要做的事就是實(shí)現(xiàn)這個(gè)接口

import {NG_VALUE_ACCESSOR,ControlValueAccessor} from "@angular/forms" @Component({selector: 'app-search-select',templateUrl: './search-select.component.html',styleUrls: ['./search-select.component.less'],providers: [{provide: NG_VALUE_ACCESSOR,useExisting: forwardRef(() => SearchSelectComponent),multi: true}] })
export class SearchSelectComponent implements ControlValueAccessor { writeValue(obj: any): void
? 　　　　registerOnChange(fn: any): void
? 　　　　registerOnTouched(fn: any): void } ?

?下面是我實(shí)現(xiàn)下拉框的子組件和父組件值的雙向綁定，也很好的解釋angular 的雙向數(shù)據(jù)綁定是由屬性綁定和方法綁定結(jié)合在一起的

export class SearchSelectComponent implements ControlValueAccessor {@Input() ngModel:string;@Output() ngModelChange=new EventEmitter<string>();@Input() options:Array<any>;private selectValue:string;private isShow:boolean;private selectList:Array<any>;constructor() {this.isShow=false;}ngOnChanges(){this.selectValue=this.ngModel;this.selectList=this.options;}registerOnChange(fn: any): void {// 頁面值改變時(shí)，調(diào)用該方法，傳入新值實(shí)現(xiàn)回傳 }registerOnTouched(fn: any): void {}ngOnInit() {}// 賦值時(shí)調(diào)用writeValue(val: object): void {}selectItem(value){this.ngModelChange.emit(value);}showSelectList(){this.isShow=true;}hideSelectList(){this.isShow=false;} } View Code

?

　　

轉(zhuǎn)載于:https://www.cnblogs.com/llcMite/p/11449516.html

總結(jié)

以上是生活随笔為你收集整理的使用ngModel创建组件的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。