在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>
原本是想写多点的,结果真的写得好简单,因为今天已经是年二十九了,刚刚老大发话说可以走了,那么在下就先跑为敬了.
虽然简单,但是核心部分就是这样子了,我相信各位聪明的读者一定可以看懂的..(捂脸)
