Angular 2：沒有UI滑塊 - 如何更改顏色？

我使用NG2-nouislider在我的角2的應用程序Angular 2：沒有UI滑塊 - 如何更改顏色？

我想通過下面這個例子來改變滑塊手柄之間的顏色：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)

來源

2017-08-05 HeisenBerg

你在哪裏並稱沒見過的顏色它在用戶界面？ – Aravind

參見func（）。我在那裏添加課程。此外，我編輯我的帖子，幷包括樣式 – HeisenBerg

像#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

來源

2017-08-06 11:46:00 yurzui

謝謝，解決了它。 – HeisenBerg

我已經在nouislider上發佈了另一個問題。你認爲你可以幫忙嗎？ https://stackoverflow.com/questions/45526114/angular-2-nouislider-how-to-recreate-the-slider – HeisenBerg

Angular 2：沒有UI滑塊 - 如何更改顏色？

回答

相關問題