Angular：找不到第三方庫庫

我在我的（第一個）Angular應用程序中使用了一些JQueryUI滑塊。Angular：找不到第三方庫庫

我想使用JQuery-Ui-Slider-Pips插件，以便在我的滑塊上添加更多信息。該庫是不可用的NPM，所以我把它添加到我的資產目錄，並添加到我的.angular-cli.json文件

"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" 
],

我也加入到這一點我index.html文件這：

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

我已經導入jQuery和jQueryUI的到我的component.ts：

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

我的ngOnInit（）方法中初始化我在一個特定的方法調用滑塊：

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", { 
}) 
; 
}

但我有以下錯誤：

「錯誤：滑塊控件實例中沒有這樣的方法‘點子’」

我猜庫不是在腳本執行中發現，但我不知道爲什麼...

PS：我不知道如何在類似的jsfiddle對角4，我是在它很新創建可編輯的樣本..但如果有必要，適當的鏈接，我可以提供這個:)

來源

2017-07-26 SebVb

我找到了解決我的問題的方法。我改變了我的方式來初始化我的滑塊，把它放到一個組件中。

的代碼，如果能提供幫助某人：

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", { 
     }); 
    } 
}

來源

2017-07-28 07:38:31 SebVb

Angular：找不到第三方庫庫

回答

相關問題