简单实现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而服务的

作者：琢磨先生lf
链接：https://www.jianshu.com/p/75b59181a5d9
來源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。

原文地址：https://www.cnblogs.com/gynStrive/p/9715250.html