angular 2 nouislider：如何重新创建滑块？

Question

我需要更改滑块上的手柄数量。谷歌搜索时它说我需要再次销毁并创建滑块。

现在这里说：Updating and reading slider options 那：

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();
}

但我似乎找不到如何在 angular 中创建滑块。

感谢任何帮助。

Answer 1

您可以通过 *ngIf

在 EmbeddedView 中包装滑块

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;
}

Plunker Example

angular 2 nouislider：如何重新创建滑块？

angular 2 nouislider: How to recreate the slider?

nouislider

angular