角jquery插件- jQuery不是在插件中定义的
角jquery插件- jQuery不是在插件中定义的
提问于 2017-05-22 13:58:52
我尝试在我的角度项目中导入jquery -旋钮插件，所以我通过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旋钮插件？
旧版本：
@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回答 2
Stack Overflow用户
发布于 2017-05-23 05:11:23
现在我找到了一个解决方案，也许它可以帮助某人:-)，我将旋钮放在自己的组件中并创建一个本机元素，然后在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);
}
}旋钮模板：
<input type="text" [attr.value]="sliderVal">父组件模板
<app-myknob class="myKnob" [sliderVal]="inputVal" (sliderValChange)="setSliderVal($event)"></app-myknob>父组件
setSliderVal(sliderVal: number) {
console.log(sliderVal);
}Stack Overflow用户
发布于 2017-08-31 04:56:59
使用安古拉2-旋钮代替jquery，这个包已经用d3.js V4完全重写为角4
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/44114802
复制相关文章
相似问题
腾讯云开发者
