Angular: Bibliothek von Drittanbietern nicht gefunden

Question

Ich verwende einige JQueryUI-Schieberegler in meiner (ersten) Angular-Anwendung.

Ich möchte das JQuery-Ui-Slider-Pips-Plugin verwenden, um weitere Informationen zu meinen Slidern hinzuzufügen. Diese Bibliothek ist auf npm nicht verfügbar, also habe ich es in mein Vermögen Verzeichnis hinzufügen und fügen Sie diese in meine .angular-cli.json Datei

"styles": [ 
    "styles.css", 
    "../node_modules/jqueryui/jquery-ui.css", 
    "./assets/css/pips/jquery-ui-slider-pips.css" 
], 
"scripts": [ 
    "./assets/js/pips/jquery-ui-slider-pips.min.js" 
], 

ich dies habe auch in meiner Datei index.html hinzugefügt :

während der ngOnInit() -Methode

import $ from 'jquery'; 
import 'jqueryui'; 

und ich initialisieren mein Schieber in einem bestimmten Methodenaufruf:

<link rel="stylesheet" href="./assets/css/pips/jquery-ui-slider-pips.css"> 

<script src="../node_modules/jquery/dist/jquery.min.js"></script> 
<script src="../node_modules/jqueryui/jquery-ui.js"></script> 
<script src="./assets/js/pips/jquery-ui-slider-pips.min.js"></script> 

ich habe jQuery und jQueryUI in meine component.ts importiert

initSlider(minValue, maxValue, stepValue, initialValue) { 
$(this.elementRef.nativeElement).find("slider").slider({ 
    range: false, 
    min: minValue, 
    max: maxValue, 
    step: stepValue, 
    value: initialValue, 
    slide: (event, ui) => { 
    this.selectedValue = ui.value; 
    this.sliderChanged(); 
    } 
}).slider("pips", { 
    rest: "label" 
}).slider("float", { 
}) 
; 
} 

Aber ich habe folgende Fehlermeldung:

„Fehler: keine solche Methode‚Pips‘für Slider-Widget-Instanz“

Ich denke, die Bibliothek wird bei der Ausführung des Skripts nicht gefunden wird, aber ich habe keine Ahnung warum ...

PS: Ich weiß nicht, wie ein editierbares Beispiel in etwas wie JSFiddle für Angular 4 erstellen, ich bin ziemlich neu drauf .. aber wenn nötig, mit dem entsprechenden Link , Kann ich dies zur Verfügung stellen :)

Answer 1

Ich habe eine Lösung für mein Problem gefunden. Ich habe meinen Weg geändert, um meinen Schieberegler zu initialisieren und ihn in eine Komponente einzufügen.

Der Code, wenn es Hilfe jemand bietet könnte:

import { Component, ElementRef, OnInit, Input, Output, EventEmitter, OnChanges } from '@angular/core'; 
declare var $: any; 
declare var noUiSlider: any; 

@Component({ 
    selector: 'app-slider', 
    template: `<div id="mySlider" class="slider"></div>`, 
    styleUrls: ['./styles/styles.css'] 
}) 

export class Slider implements OnInit { 

    @Input() minValue; 
    @Input() maxValue; 
    @Input() stepValue; 
    @Input() initialValue; 
    @Output() sliderChanged = new EventEmitter(); 

    constructor(private elementRef: ElementRef) { 
    } 

    ngOnInit() { 
     this.renderSlider(); 
    } 

    renderSlider() { 
     let that = this; 
     $(this.elementRef.nativeElement).find("#mySlider").slider({ 
      range: false, 
      min: +that.minValue, 
      max: +that.maxValue, 
      step: +that.stepValue, 
      value: +that.initialValue, 
      slide: function (event, ui) { 
       that.sliderChanged.emit(ui.value); 
      } 
     }).slider("pips", { 
      rest: "label", 
     }).slider("float", { 
     }); 
    } 
}