Wie baut man/benutzt man einen Schieberegler mit angular2?

Question

Ich brauche einen Banner-Slider in einer eckigen App 2. Ich habe eine Komponente namens Banner-Slider erstellt, die den HTML-Code für den Slider enthält und ihn dann in der Ansicht der App-Komponente anzeigt.

das problem ist, wenn der browser lädt dann die seite alles was ich bekomme ist drei stacked li's wo als wenn ich den code direkt auf der index.html der slider funktioniert gut? Muss ich etwas tun, um winkelig zu werden, um mit jQuery zu arbeiten, oder gibt es einen eckigen 2 spezifischen Schieberegler, der gut ist? Wenn nicht, weiß jemand, wo man mit dem Aufbau eines beginnt?

Ich verwende derzeit unslider | unslider.com

Answer 1

Diese Frage könnte Ihnen helfen:

• Angular2 with Jquery-ui Slider

Die Idee, die Anwendung des jQuery-Plugin innerhalb eines Angular2 Komponente zu wickeln ist. Dies kann im Rahmen ihrer ngOnInit Methode erfolgen:

@Component({ 
    (...) 
}) 
export class Slider implements OnInit { 
    elementRef: ElementRef; 
    slideValue: number; 

    constructor(private elementRef: ElementRef) { 
    } 

ngOnInit() { 
    jQuery(this.elementRef.nativeElement).slider({ 
     range: false, 
     orientation: "vertical", 
     min: 0, 
     max: 100, 
     value: 60, 
     slide: (event, ui) => { 
     (...) 
     } 
    }); 
    } 
} 

Answer 2

Sie jede jquery verwenden, können Sie in einem Dokument für angular2 jedoch wollen, dass es in der Lage sein zu verwenden, haben Sie es zu initiieren auf der Seite, die Sie sind!

viel einfacher als Sie denken, alles, was Sie tun, verwenden ist ngOnInit() {}

also wenn jemand nutzt unslider Sie nur

ngOnInit() { 

    jQuery(document).ready(function ($) { 
    $('.my-slider').unslider({autoplay: true, delay: 4000, arrows: false, nav: false}); 


} 

brauchen würde so was JQuery auf Last put ausgeführt werden muss es in der ngOnInit().