首页 文章

Angular：找不到第三方库库

提问于
浏览 次
0

我在我的（第一个）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", {
})
;
}

但是我有以下错误：

“错误：滑块小部件实例没有这样的方法'pips'”

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

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

angular npm node-modules jquery-ui-slider-pips

1 回答

  • 0

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

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

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

相关问题