AngularJS2简单打造双向绑定的自定义组件

在ng2的使用中,自己开发一个能够双向数据绑定的组件几乎是一个过不去的坎.

本篇就是一个关于怎样开发一个能够双向数据绑定组件的基本教程.

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

首先需要import的如上.

接下来以我随便写的一个toggle button控件为例:

@Component({
 selector:'rio-toggle-button',
 template:
 关 开 
 
,
 styleUrls:['./toggleButton.less'],
 providers:[{
 provide:NG_VALUE_ACCESSOR,
 useExisting:forwardRef(()=>RioToggleButton),
 multi:true
 }]
 })
 

接下来是主体部分:

export class RioToggleButton implements ControlValueAccessor{
...

private active:any=false;
private propagateChange:any={};
  
set value(v:any){
    if(v!==this.active){
        this.active=v;
        this.propagateChange(this.active)
    }
}

get value(){
    return this.active;
}


writeValue(value: any) {
    if(value!=undefined){
        this.active = value;
    }
}
registerOnChange(fn) {
    this.propagateChange = fn;
}
registerOnTouched() {}

}
 

然后是组件的使用:

原本是想写多点的,结果真的写得好简单,因为今天已经是年二十九了,刚刚老大发话说可以走了,那么在下就先跑为敬了.

虽然简单,但是核心部分就是这样子了,我相信各位聪明的读者一定可以看懂的..(捂脸)

原文地址