使用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);
}
}
我必须添加什么才能在以下代码中的模板中使用它?理想情况下,它应该实现<input type="checkbox" />
的所有功能.
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>
查看此插件: https://plnkr.co/edit/z1gAC5U0pgMSq0wicGHC?p=preview .
有关更多详细信息,请参见本文(与NgModel兼容的组件"部分):
See this article for more details (section "NgModel-compatible component"):
这篇关于使用Switchery设置样式的自定义复选框输入组件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!