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