angular 2 nouislider:如何重新创建滑块? [英] angular 2 nouislider: How to recreate the slider?

问题描述

我需要更改滑块上的手柄数量.谷歌搜索时说我需要销毁并重新创建滑块.

I need to change the number of handles on a slider. When googling it says I need to destroy and create the slider again.

现在它在此处显示:更新和阅读滑块选项:

要更新任何其他选项，请使用销毁滑块 slide.noUiSlider.destroy()并创建一个新的.请注意，事件是 销毁滑块时不会解脱.

To update any other option, destroy the slider using slider.noUiSlider.destroy() and create a new one. Note that events are not unbound when destroying a slider.

我能够销毁滑块:

@ViewChild('slider') slider;

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

但是我似乎找不到如何创建有角度的滑块.

but I can't seem to find how to create the slider in angular.

感谢您的帮助.

推荐答案

您可以通过*ngIf

component.html

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

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

然后重新创建函数可能类似于:

and then reCreate function could look like:

component.ts

flag = true;

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

柱塞示例

Plunker Example

这篇关于angular 2 nouislider:如何重新创建滑块?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！