Angular2 - Directive - CheckboxControlValueAccessor

前一阵时间心里稍有烦躁，去看看下react 和redux， 今天回来继续踏实解读

---

CheckboxControlValueAccessor - 直接翻译就是访问器

源码

/**
 * The accessor for writing a value and listening to changes on a checkbox input element.
 *
 *  ### Example
 *  
 *  <input type="checkbox" ngControl="rememberLogin">
 *  
 */
@Directive({
  selector:
      'input[type=checkbox][ngControl],input[type=checkbox][ngFormControl],input[type=checkbox][ngModel]',
  host: {'(change)': 'onChange($event.target.checked)', '(blur)': 'onTouched()'},
  bindings: [CHECKBOX_VALUE_ACCESSOR]
})
export class CheckboxControlValueAccessor implements ControlValueAccessor {
  onChange = (_) => {};
  onTouched = () => {};

  constructor(private _renderer: Renderer, private _elementRef: ElementRef) {}

  writeValue(value: any): void {
    this._renderer.setElementProperty(this._elementRef.nativeElement, 'checked', value);
  }
  registerOnChange(fn: (_: any) => {}): void { this.onChange = fn; }
  registerOnTouched(fn: () => {}): void { this.onTouched = fn; }
}

• selector 是多个 基本覆盖所有需要input的地方
• bindings - 可能会被providers : any[] 代替，也就是要注入一些这个Directive要用的class
• writeValue - 改变checkbox的 check属性
• registerOnxx 就是 给以一个func为参数传给onChange/onTouched方法，以便host当中的事件触发时调用

例如registerOnChange (function(x){return x*2});

里面这个function会给 onChange