使用ngModel创建组件

@angular/forms里有个接口用来实现支持[(ngModel)]，具体可查ControlValueAccessor，这边还未深入理解只是为了开发组件而初步了解

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

我们要做的事就是实现这个接口

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 } 

 下面是我实现下拉框的子组件和父组件值的双向绑定，也很好的解释angular 的双向数据绑定是由属性绑定和方法绑定结合在一起的

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 {// 页面值改变时，调用该方法，传入新值实现回传
}registerOnTouched(fn: any): void {}ngOnInit() {}// 赋值时调用writeValue(val: object): void {}selectItem(value){this.ngModelChange.emit(value);}showSelectList(){this.isShow=true;}hideSelectList(){this.isShow=false;}
}