angular – 自定义复选框输入组件,使用Switchery设计

发布时间：2020-12-17 07:50:52 所属栏目：安全来源：网络整理

导读：我正在尝试创建一个使用Switchery设计的自定义复选框组件,可以像任何其他形式一样使用 input type =“checkbox”... /零件. 我现在的代码负责样式： import {Component,ViewChild,AfterViewInit,Input} from 'angular2/core';import switchery from 'switche

我正在尝试创建一个使用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();
      }
    }
  }
}

最后,您需要将值访问器注册到组件的提供者：

const CUSTOM_VALUE_ACCESSOR = new Provider(
  NG_VALUE_ACCESSOR,{useExisting: forwardRef(() => SwitcheryComponent),multi: true});

@Component({
  selector: 'switchery-checkbox',providers: [ CUSTOM_VALUE_ACCESSOR ]
})
export class SwitcheryComponent implements AfterViewInit,ControlValueAccessor {
  (...)
}

这样你就可以这样使用你的指令：

<switchery-checkbox [disabled]="disabled"
       [(ngModel)]="value" ngControl="cb"
       #cb="ngForm"></switchery-checkbox>

看到这个plunkr：https://plnkr.co/edit/z1gAC5U0pgMSq0wicGHC?p=preview.

有关更多详细信息,请参阅此文章(“与NgModel兼容的组件”部分)：

> http://restlet.com/blog/2016/02/17/implementing-angular2-forms-beyond-basics-part-2/

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!