使用ngModel创建组件

Posted 2022-09-24 llcmite

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

interface ControlValueAccessor 
  writeValue(obj: any): void
  registerOnChange(fn: any): void
  registerOnTouched(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