Angular 2：否 UI Slider - 如何改变颜色？

Question

我在 angular 2 应用程序中使用 ng2-nouislider

我尝试按照以下示例更改滑块手柄之间的颜色：section-colored-connect

在我的 HTML 我

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

和.ts

@ViewChild('slider') slider;

  someKeyboardConfig: any = {
    behaviour: 'drag',
    connect: [true, true, true, true, true],
    start: [20, 40, 60, 80],
    keyboard: true,  // same as [keyboard]="true"
    step: 0.1,
    pageSteps: 10,  // number of page steps, defaults to 10
    range: {
      min: 0,
      max: 100
    },
    pips: {
      mode: 'count',
      density: 2,
      values: 6,
      stepped: true
    }
  };
  ngAfterViewInit() {
    this.func();
  }

  func() {
    var connect = this.slider.querySelectorAll('.noUi-connect');
    var classes = ['c-1-color', 'c-2-color', 'c-3-color', 'c-4-color', 'c-5-color'];
    console.log(connect.length);
    for ( var i = 0; i < connect.length; i++ ) {
      connect[i].classList.add(classes[i]);
    }
  }

styles.css

.c-1-color { background: red; }
.c-2-color { background: yellow; }
.c-3-color { background: green; }
.c-4-color { background: blue; }
.c-5-color { background: purple; }

但它不起作用。我在这里做错了什么？

编辑：

我在控制台中看到错误

ERROR TypeError: this.slider.querySelectorAll is not a function
    at VitalSettingsComponent.webpackJsonp.../../../../../src/app/vitals/vital-settings/vital-settings.component.ts.VitalSettingsComponent.func (vital-settings.component.ts:98)
    at VitalSettingsComponent.webpackJsonp.../../../../../src/app/vitals/vital-settings/vital-settings.component.ts.VitalSettingsComponent.ngAfterViewInit (vital-settings.component.ts:62)
    at callProviderLifecycles (core.es5.js:11182)
    at callElementProvidersLifecycles (core.es5.js:11157)
    at callLifecycleHooksChildrenFirst (core.es5.js:11141)
    at checkAndUpdateView (core.es5.js:12246)
    at callViewAction (core.es5.js:12603)
    at execEmbeddedViewsAction (core.es5.js:12561)
    at checkAndUpdateView (core.es5.js:12239)
    at callViewAction (core.es5.js:12603)

Answer 1

在组件元素上设置的模板引用变量，如 #name 将为我们提供组件实例（在您的情况下为 NouisliderComponent）。

如果你想获得原生元素你必须为 @ViewChild 装饰器指定 read 属性:

@ViewChild('slider', { read: ElementRef }) slider: ElementRef;

之后你就可以像

一样使用它了

~~this.slider.querySelectorAll('.noUi-connect');~~:

this.slider.nativeElement.querySelectorAll('.noUi-connect')

也可以在对应的Plunker Example

中试试

这个问题可能也有帮助

Angular 2：否 UI Slider - 如何改变颜色？

Angular 2: No UI Slider - How to change color?

colors

nouislider

angular