使用 Switchery 设计的自定义复选框输入组件 [英] Custom checkbox input component styled with Switchery
问题描述
我正在尝试创建一个带有 Switchery 样式的自定义复选框组件,该组件可以像任何其他 <input type="checkbox" .../>
组件一样用于表单中.
I'm trying to create a custom checkbox component styled with Switchery that can be used in a form like any other <input type="checkbox" ... />
component.
我现在的代码负责样式:
The code I have now takes care of the styling:
import {Component,ViewChild,AfterViewInit,Input} from 'angular2/core';
import switchery from 'switchery';
@Component({
selector: 'switchery-checkbox',
template: `<input #checkbox type="checkbox" class="js-switch"/>`,
})
export class SwitcheryComponent implements AfterViewInit {
@Input() options: Switchery.Options = {};
@ViewChild('checkbox') checkbox: any;
ngAfterViewInit() {
new switchery(this.checkbox.nativeElement,
this.options);
}
}
我必须添加什么才能在模板中使用它,例如以下代码?理想情况下,它应该实现 的所有功能.
What do I have to add to be able to use it in a template like in the following code? It should ideally implement all the functionality of <input type="checkbox" />
.
<switchery-checkbox
[(ngModel)]="model.onOrOff"
ngControl="onOrOff"
[disabled]="disabledCondition"
... >
</switchery-checkbox>
推荐答案
实际上,您需要使组件符合 ngModel",但要实现自定义值访问器.
In fact you need to make your component "ngModel-compliant" but implementing a custom value accessor.
方法如下:
@Component({
selector: 'switchery-checkbox',
template: `
<input #checkbox type="checkbox" (change)="onChange($event.target.checked)" class="js-switch"/>
`,
(...)
})
export class SwitcheryComponent implements AfterViewInit, ControlValueAccessor {
@Input() options: Switchery.Options = {};
@Input() disabled:boolean = false;
@ViewChild('checkbox') checkbox: any;
value: boolean = false;
onChange = (_) => {};
onTouched = () => {};
writeValue(value: any): void {
this.value = value;
this.setValue(this.value);
}
registerOnChange(fn: (_: any) => void): void { this.onChange = fn; }
registerOnTouched(fn: () => void): void { this.onTouched = fn; }
ngAfterViewInit() {
this.switcher = new switchery(this.checkbox.nativeElement,
this.options);
this.setValue(this.value);
this.setDisabled(this.disabled);
}
ngOnChanges(changes: {[propName: string]: SimpleChange}) {
if (changes && changes.disabled) {
this.setDisabled(changes.disabled.currentValue);
}
}
setValue(value) {
if (this.switcher) {
var element = this.switcher.element;
element.checked = value
}
}
setDisabled(value) {
if (this.switcher) {
if (value) {
this.switcher.disable();
} else {
this.switcher.enable();
}
}
}
}
最后你需要将值访问器注册到组件的providers
中:
Finally you need to register the value accessor into the providers
of the component:
const CUSTOM_VALUE_ACCESSOR = new Provider(
NG_VALUE_ACCESSOR, {useExisting: forwardRef(() => SwitcheryComponent), multi: true});
@Component({
selector: 'switchery-checkbox',
template: `
<input #checkbox type="checkbox" (change)="onChange($event.target.checked)" class="js-switch"/>
`,
providers: [ CUSTOM_VALUE_ACCESSOR ]
})
export class SwitcheryComponent implements AfterViewInit, ControlValueAccessor {
(...)
}
这样你就可以这样使用你的指令:
This way you can use your directive this way:
<switchery-checkbox [disabled]="disabled"
[(ngModel)]="value" ngControl="cb"
#cb="ngForm"></switchery-checkbox>
查看此 plunkr:https://plnkr.co/edit/z1gAC5U0pgMSq0wicGHC?p=preview.
See this plunkr: https://plnkr.co/edit/z1gAC5U0pgMSq0wicGHC?p=preview.
查看这篇文章了解更多详情(NgModel 兼容组件"部分):
See this article for more details (section "NgModel-compatible component"):
这篇关于使用 Switchery 设计的自定义复选框输入组件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!