简单实现angular2组件双向绑定

直接献上代码
父组件

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'ngx-input',
  templateUrl: `
    <p>双向绑定</p>
    {{pvalue}} <input type="radio" [attr.value]="pvalue" [checked]="pvalue" (change)="pvalue=!pvalue">
    <br>
    <p>双向子组件</p>
    <ngx-two-way [(ngModel)]="pvalue"></ngx-two-way>
`
})
export class InputComponent {

  pvalue = false;

  constructor() { }
}

子组件

import {Component, forwardRef} from '@angular/core';
import {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms'

@Component({
  selector: 'ngx-two-way',
  templateUrl:`
    <div class="toggle-button-container">
      <a href="javascript:;"  (click)="toggle()" class="text-close" *ngIf="!model">关</a>
      <a href="javascript:;"  (click)="toggle()" class="text-open" *ngIf="model">开</a>
  </div>
  `,
  providers: [{
        provide: NG_VALUE_ACCESSOR,
        useExisting: forwardRef(() => TwoWayComponent),
        multi: true
    }]
})
export class TwoWayComponent implements ControlValueAccessor {

  constructor() { }

  private model: any;

  public onModelChange: Function = () => {};
  public onModelTouched: Function = () => {};
  writeValue(value: any) {
      this.model = value;
  }
  registerOnChange(fn: Function): void {
      this.onModelChange = fn;
  }
  registerOnTouched(fn: Function): void {
      this.onModelTouched = fn;
  }

  // setDisabledState(val: boolean): void {}

  toggle(event) {
    this.model = !this.model;
    this.onModelChange(this.model);
  }
}

简单说明:

NG_VALUE_ACCESSOR

原文说明:
Used to provide a ControlValueAccessor for form controls.
为ControlValueAccessor提供注入

ControlValueAccessor:

这是实现双向绑定的核心
原文说明:
A bridge between a control and a native element.
A ControlValueAccessor abstracts the operations of writing a new value to a DOM element representing an input control.
大意是让一个DOM元素像input空间一样去展示数据
其中registerOnChange和registerOnTouched是必须实现的方法。

useExisting: forwardRef(() => TwoWayComponent),

如果少了这一段,会报错

image.png
 Argument of type '{ selector: string; templateUrl: string; styleUrls: string[]; providers: { provide: InjectionToke...' is not assignable to parameter of type 'Component'.
  Types of property 'providers' are incompatible.
    Type '{ provide: InjectionToken<ControlValueAccessor>; }[]' is not assignable to type 'Provider[]'.
      Type '{ provide: InjectionToken<ControlValueAccessor>; }' is not assignable to type 'Provider'.
        Type '{ provide: InjectionToken<ControlValueAccessor>; }' is not assignable to type 'FactoryProvider'.
          Property 'useFactory' is missing in type '{ provide: InjectionToken<ControlValueAccessor>; }'.

大意是InjectionToke(在NG_VALUE_ACCESSOR中import的)必须被指派一个component

InjectionToke

原文说明:
Creates a token that can be used in a DI Provider.
Use an InjectionToken whenever the type you are injecting is not reified (does not have a runtime representation) such as when injecting an interface, callable type, array or parametrized type.

InjectionToken is parametrize on T which is the type of object which will be returned by the Injector. This provides additional level of type safety.
大意是让你在接口、类在还没实例化之前调用

forwardRef

原文说明:
Allows to refer to references which are not yet defined.

For instance, forwardRef is used when the token which we need to refer to for the purposes of DI is declared, but not yet defined. It is also used when the token which we use when creating a query is not yet defined.
为InjectionToke服务的,让有DI未定义的token能够使用

multi: true

少了会报错

image.png

应该是为NG_VALUE_ACCESSOR能让forEach而服务的

推荐阅读更多精彩内容

  • 线程的常用方法 1.start(): 线程调用该方法将启动线程,使之从新建状态进入就绪队列排队,一旦轮到它来享用C...
    沧海一束阅读 417评论 0 0
  • 说起三国,一篇《隆中对》可谓震铄古今。不过,很多人可能不知道,同期还有一篇策论与隆中对可谓异曲同工,只是期间过程没...
    E花一世界阅读 317评论 0 1
  • 昨晚上班遇到一客人,因为餐厅的银联卡机信号问题,他享有消费满150元减50元的建行信用卡一直刷卡不成功,致电建行客...
    我是松鼠酱阅读 321评论 0 6