Angular：未找到第 3 方库答案

【问题标题】：Angular : 3rd party library library not foundAngular：未找到第 3 方库
【发布时间】：2017-07-28 15:38:31
【问题描述】：

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

但我有以下错误：

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

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

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

【问题讨论】：

标签： angular npm node-modules jquery-ui-slider-pips

【解决方案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", {
        });
    }
}

【讨论】：