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

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

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

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

首先需要import的如上.

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

@Component({
selector:'rio-toggle-button',
template:<div class="toggle-button-container"}" (click)="toggle()"> <a href="javascript:;" class="text-close" *ngIf="!active">关</a> <a href="javascript:;" class="text-open" *ngIf="active">开</a> <div class="circle" ></div> </div>,
styleUrls:['./toggleButton.less'],
providers:[{
provide:NG_VALUE_ACCESSOR,
useExisting:forwardRef(()=>RioToggleButton),
multi:true
}]
})
</pre>

接下来是主体部分:

<pre>

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() {}

}
</pre>

然后是组件的使用:

<pre>
<rio-toggle-button [(ngModel)]="deliverSwitch" ></rio-toggle-button>
</pre>

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

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

原文地址