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

我尝试在我的Angular项目中导入jquery-knob插件,所以我通过npm安装了jquery – 工作正常。 现在我想添加jquery旋钮(也通过npm),但我得到这个错误,我认为它在

jquery.knob.min.js

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 

在.angluar-cli.json

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

零件:

 import * as jQuery from 'jquery'; import * as knobObj from 'jquery-knob'; 

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

使用版本:

 @angular/cli: 1.0.1 node: 6.10.0 os: darwin x64 @angular/common: 4.1.0 @angular/compiler: 4.1.0 @angular/core: 4.1.0 @angular/forms: 4.1.0 @angular/http: 4.1.0 @angular/platform-browser: 4.1.0 @angular/platform-browser-dynamic: 4.1.0 @angular/router: 4.1.0 @angular/cli: 1.0.1 @angular/compiler-cli: 4.1.0 

现在我find了一个解决scheme,也许它有助于某人:-),我把旋钮放在一个自己的组件,并创build一个本地元素,然后用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); } 

使用angular2旋钮,而不是jquery插件,这个包已被完全重写为angular4使用d3.js V4