Пользовательский компонент ввода флажка, стилизованный под Switchery

Я пытаюсь создать собственный компонент флажка в стиле 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>

angular angular2-forms
person kayleefrye    schedule 12.04.2016    source источник

Ответы (1)


arrow_upward
3
arrow_downward

На самом деле вам нужно сделать ваш компонент «совместимым с 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»):

person Thierry Templier    schedule 12.04.2016