角度4：jqueryのスライダーは、コンポーネントに

Question

import { Component, ElementRef, Inject, AfterViewInit, Input } from '@angular/core'; 
declare var jQuery:any; 

@Component({ 
    selector: 'app-slider', 
    templateUrl: './slider.component.html', 
    styleUrls: ['./slider.component.css'] 
}) 
export class SliderComponent implements AfterViewInit { 

@Input() slideValue: number;  
elementRef: ElementRef; 
visibility = 'hidden'; 
@Input() index: number; 

constructor(@Inject(ElementRef) elementRef: ElementRef) { 
    this.elementRef = elementRef; 
} 

updSlider() { 
    jQuery(this.elementRef.nativeElement).find("#slider") 
    .slider("option", "value", this.slideValue);  
} 

ngAfterViewInit() { 
    jQuery(this.elementRef.nativeElement).find("#slider").slider({ 
    range: "min", 
    orientation: "vertical", 
    min: 0, 
    max: 300, 
    animate: true, 
    step: 1, 
    value: this.slideValue, 
    slide: (event, ui) => { 
     this.slideValue = ui.value; 
     this.visibility = "visible"; 
     jQuery(this.elementRef.nativeElement).find(".ui-slider-range").css({"background": "#FFFFcc"}); 
    } 
    }); 
} 

    ngOnInit() { 
    } 

} 

slider.component.ts私は私のメインコンポーネントからそれを呼ば

を使用して機能ではありません。

thowing jquery.sliderは機能ではありません。

ERRORエラー：キャッチされない（約束で）：TypeError例外：jQueryの（...）（...）を見つけるスライダーは、私はまた、通常のjqueryのスライダーを試してみまし機能

ではありません。ここにも同じ問題があります。そこで、以下の例のangular2コンポーネントを試しました。

https://plnkr.co/edit/ZoquO4A9Uk5t6Unh50gZ?p=preview

私は同じ問題を得ました。この上の任意のヘルプを理解することができる

4の角度であるWebPACKのバージョンを使用して

イム。

Answer 1

あなたは角度-CLIを使用する場合：

角度-cli.json：あなたはjQueryのUIスライダーを使用している

"scripts": [ 
      "../path/jquery-ui-slider.js" 
    ], 

を：

import '../../../path/jquery-ui-slider.js'; 

はそれが役に立てば幸いそれがどうなるか教えてください！

幸運な仲間！ ;）