Question

I'm using ng2-nouislider in my angular 2 app

I trying to change the color between the slider handles by following this example: section-colored-connect

In my HTML I've

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

and in .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; }

but it's not working. What am I doing wrong here?

Edit:

I see error in console

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）。

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

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

之后你可以像

一样使用它

~~this.slider.querySelectorAll（ 'NOUI-CONNECT。'）; ：~~

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

您也可以在相应的 Plunker Example
中试用它
这个问题可能也有帮助

What is #auto attribute here and why it is required

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

1 个答案: