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

【问题标题】：angular 2 nouislider: How to recreate the slider?angular 2 nouislider：如何重新创建滑块？
【发布时间】：2017-08-05 20:27:01
【问题描述】：

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

要更新任何其他选项，请使用销毁滑块 slider.noUiSlider.destroy() 并创建一个新的。请注意，事件是销毁滑块时未解除绑定。

我能够破坏滑块：

@ViewChild('slider') slider;

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

但我似乎无法找到如何以角度创建滑块。

感谢任何帮助。

【问题讨论】：

【解决方案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;
}

【讨论】：