Question

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

我想使用JQuery-Ui-Slider-Pips插件，以便在我的滑块上添加更多信息。这个库在npm上不可用，所以我将它添加到我的assets目录中并将其添加到我的.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", {
})
;
}

但我有以下错误：

＆＃34;错误：没有这样的方法＆＃39; pips＆＃39;对于滑块小部件实例＆＃34;

我想在执行脚本时找不到图书馆，但我不知道为什么......

PS：我不知道如何在JSFiddle for Angular 4中创建一个可编辑的样本，我对它很新......但如果有必要，通过适当的链接，我可以提供：）

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：找不到第三方库库

1 个答案: