Question

我尝试在我的Angular项目中导入jquery-knob插件，所以我通过npm安装了jquery - 运行正常。现在我想添加jquery-knob（也通过npm）但我得到这个错误，我认为它在

jquery.knob.min.js

false

<。>在.angluar-cli.json

re.open("POST","http://localhost:5400", false);

成分：

Uncaught ReferenceError: jQuery is not defined
    at eval (eval at webpackJsonp.310.module.exports (addScript.js:9), <anonymous>:1:85)
    at eval (eval at webpackJsonp.310.module.exports (addScript.js:9), <anonymous>:1:95)
    at eval (<anonymous>)
    at webpackJsonp.310.module.exports (addScript.js:9)
    at Object.155 (jquery.knob.min.js?4d31:1)
    at __webpack_require__ (bootstrap aa173b5…:52)
    at Object.351 (addScript.js:10)
    at __webpack_require__ (bootstrap aa173b5…:52)
    at webpackJsonpCallback (bootstrap aa173b5…:23)
    at scripts.bundle.js:1

如何将JQuery实例传递给jquery-knob插件？

二手版本：

"scripts": [
        "../node_modules/jquery-knob"
      ],

Answer 1

现在我找到了一个解决方案，也许它可以帮助某人:-)，我把旋钮放在一个自己的组件中并创建一个原生元素，然后在input()和output()之间传递值，参见代码：

myknob.component

import {Component, ElementRef, EventEmitter, Input, OnInit, Output} from '@angular/core';
import * as $ from 'jquery';
import "jquery-knob";

@Component({
  selector: 'app-myknob',
  templateUrl: './myknob.component.html',
  styleUrls: ['./myknob.component.css']
})
export class MyknobComponent implements OnInit {

  knobElement: any;

  @Input() sliderVal : number;
  @Output() sliderValChange = new EventEmitter<number>();

  constructor(private elementRef : ElementRef) { }

  ngOnInit() {
    this.knobElement = $(this.elementRef.nativeElement);
    this.knobElement.knob({
        "bgColor": "#FFF",
        "fgColor": "#222222",
        "thickness" : .2,
      change : (value) => this.setVal(value)
    });
    this.knobElement.val(this.sliderVal).trigger('change');


  }

  setVal(val) {

    this.sliderVal = val;
    this.sliderValChange.emit(this.sliderVal);
  }

}

myknob模板：

<input type="text"  [attr.value]="sliderVal">

父组件模板

<app-myknob class="myKnob" [sliderVal]="inputVal" (sliderValChange)="setSliderVal($event)"></app-myknob>

父组件

setSliderVal(sliderVal: number) {
    console.log(sliderVal);
  }

Answer 2

使用angular2-knob代替jquery插件，使用d3.js V4完全为角度4重写了这个包

Angular jquery插件 - jQuery没有在插件中定义

2 个答案: