angular 2 nouislider: как воссоздать слайдер?

Мне нужно изменить количество ручек на ползунке. При гуглении говорит, что мне нужно уничтожить и снова создать слайдер.

Теперь здесь написано: Обновление и чтение параметров ползунка что:

Чтобы обновить любую другую опцию, уничтожьте ползунок с помощью slider.noUiSlider.destroy() и создайте новый. Обратите внимание, что события не освобождаются при уничтожении ползунка.

Я смог уничтожить ползунок:

@ViewChild('slider') slider;

destroySlider() {
    this.slider.slider.destroy();
}

но я не могу найти, как создать ползунок в angular.

Любая помощь приветствуется.


angular nouislider
person Drunken Daddy    schedule 05.08.2017    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Вы можете обернуть ползунок в EmbeddedView через *ngIf

component.html

<button (click)="reCreate()">Recreate slider</button>

<nouislider *ngIf="flag" #slider [config]="someKeyboardConfig"></nouislider>

и тогда функция reCreate может выглядеть так:

component.ts

flag = true;

reCreate() {
  this.slider.slider.destroy();
  this.flag = false;
  this.cdRef.detectChanges();
  this.flag = true;
}

Пример планкера

person yurzui    schedule 06.08.2017
comment
Работает отлично. Большое спасибо. - person Drunken Daddy; 06.08.2017