我正在尝试创建一个样式为Switchery的自定义复选框组件，该组件可用于其他<input type="checkbox" ... />组件一样的形式。
我现在拥有的代码负责样式设置：
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" />。
<switchery-checkbox
[(ngModel)]="model.onOrOff"
ngControl="onOrOff"
[disabled]="disabledCondition"
... >
</switchery-checkbox>
实际上，您需要使组件“符合ngModel”，但要实现自定义值访问器。
方法如下：
@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组件的中：
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 {
(...)
}
这样，您可以通过以下方式使用指令：
<switchery-checkbox [disabled]="disabled"
[(ngModel)]="value" ngControl="cb"
#cb="ngForm"></switchery-checkbox>
请参阅以下代码：https ://plnkr.co/edit/z1gAC5U0pgMSq0wicGHC ? p = preview 。
有关更多详细信息，请参见本文（“与NgModel兼容的组件”一节）：
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句