angular双向数据绑定实践 - 分页组件

angular在Form模块提供了ngModel指令，应用了此指令的表单元素（input,select等）可以支持数据的双向绑定。当ngModel指令应用在非表单元素上时会在运行时报错，也就是说ngModel的使用是有前置条件的。在web应用中，有时候也希望自己开发的组件（比如日期、多选等）可以支持双向绑定，那现在就研究下如何让自定义的组件也支持双向数据绑定。

先从ngModel指令开始说起，构造函数如下。

//ngModel构造函数
constructor(parent: ControlContainer, validators: Array<Validator | ValidatorFn>, asyncValidators: Array<AsyncValidator | AsyncValidatorFn>, valueAccessors: ControlValueAccessor[]);

angular的注入器会为构造函数中注入以下实例：

• parent - 父容器
• validators - 同步验证器
• asyncValidators - 异步验证器
• valueAccessors - 类型为ControlValueAccessor的数组

可以猜测双向绑定依赖于ControlValueAccessor， 通过valueAccessors 可以实现数据的双向流动。查看ControlValueAccessor的相关文档：ControlValueAccessor是连接dom元素与form api的桥梁，如果创建自定义的form指令（组件也是指令的一种）并与form交互可实现此接口。接口方法如下：

interface ControlValueAccessor { 
  writeValue(obj: any): void
  registerOnChange(fn: any): void
  registerOnTouched(fn: any): void
  setDisabledState(isDisabled: boolean)?: void
}

• writeValue - 写入值，data从model流向view
• registerOnChange - 注册值改变后的回调
• registerOnTouched - 注册失去焦点事件后的回调
• setDisabledState - angular会在control的disabled状态改变时调用此方法

在angualr的Form模块中找下实现了ControlValueAccessor的类。可以发现DefaultValueAccessor, RadioControlValueAccessor, NumberValueAccessor, SelectControlValueAccessor, SelectMultipleControlValueAccessor，这些类均实现了ControlValueAccessor 接口。
在源码中查看DefaultValueAccessor，类声名的相关代码如下：

export const DEFAULT_VALUE_ACCESSOR: any = {
  provide: NG_VALUE_ACCESSOR,
  useExisting: forwardRef(() => DefaultValueAccessor),
  multi: true
};
@Directive({
  selector:
      'input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]',
  host: {
    '(input)': '$any(this)._handleInput($event.target.value)',
    '(blur)': 'onTouched()',
    '(compositionstart)': '$any(this)._compositionStart()',
    '(compositionend)': '$any(this)._compositionEnd($event.target.value)'
  },
  providers: [DEFAULT_VALUE_ACCESSOR]
})
export class DefaultValueAccessor implements ControlValueAccessor {}

看到这里，差不多就可以弄清楚如何实现一个支持双向绑定的指令了。两个关键点：

• 指令需要实现ContrlValueAccessor接口
• 为指令提供ACCESSOR，以便注入器在ngModel中可注入accessor实例执行双向绑定

接下来，就照着DefaultValueAccessor 实现一个支持双向绑定的组件。之前项目中，写过一个jquery版本的分布插件，这里实现的angular组件就以分页为例（需要bootstrap）。分页组件要实现以下功能：

• 支持双向数据绑定
• 可以显示分页信息
• 页码改变后回调

pager.component.ts双向绑定相关代码如下：

import { Component,forwardRef, Input, Output, ViewChild, EventEmitter,ViewEncapsulation } from '@angular/core';
import {ControlValueAccessor,NG_VALUE_ACCESSOR} from '@angular/forms';

export const PAGER_CONTROL_VALUE_ACCESSOR: any = {
    provide: NG_VALUE_ACCESSOR,
    useExisting: forwardRef(() => PagerComponent),
    multi: true
};
@Component({
    selector: 'upc-pager',
    templateUrl: './pager.component.html',
    encapsulation:ViewEncapsulation.None,
    styleUrls:['./pager.component.css'],
    providers:[PAGER_CONTROL_VALUE_ACCESSOR]
})
export class PagerComponent implements ControlValueAccessor {
    writeValue(v: any): void {
        this.currentEle.nativeElement.value = v;
    }
    registerOnChange(fn: any): void {
        this._onChange=fn;
    }
    registerOnTouched(fn: any): void {
        this._onTouched=fn;
    }
    setDisabledState?(isDisabled: boolean): void {
    }
    to(v: number,back=false, event?: Event) {
        if (event) {
            event.preventDefault();
        }
        if (v <= this.totalPage && v != this._current && v > 0) {
            this._current = v;
            this._pageInfo=this.getPageInfo();
            this.writeValue(v);
            this._onChange(this._current);
            this.onPageChanged.emit(v);
        }else{
            back?this.currentEle.nativeElement.value = this._current:void 0;
        }
    }
}

使用方式如下：

<upc-pager [pageSize]="pageSize"  [showInfo]="true" [(ngModel)]="current" [totalItem]="total" (onPageChanged)='onPageChanged($event)'></upc-pager>

效果图如下：

pager.jpg

完整代码：https://github.com/upcyoung/upc-pagination/tree/master/src/pager