Angular : 找不到第 3 方库库

Question

我在我的（第一个）Angular 应用程序中使用了一些 JQueryUI 滑块。

我想使用 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", {
})
;
}

但我有以下错误:

"Error: no such method 'pips' for slider widget instance"

我猜想在执行脚本时找不到该库，但我不知道为什么...

PS ：我不知道如何在 JSFiddle 之类的东西中为 Angular 4 创建一个可编辑的样本，我对它很陌生..但如果有必要，使用适当的 link，我可以提供这个:)

Answer 1

我找到了解决问题的方法。我改变了初始化滑块的方式，将其放入组件中。

代码，如果它可以帮助某人：

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

Angular : 找不到第 3 方库库

Angular : 3rd party library library not found

npm

node-modules

jquery-ui-slider-pips

angular