Angular jquery 插件 - 插件中未定义 jQuery答案

【问题标题】：Angular jquery plugin - jQuery is not defined in pluginAngular jquery 插件 - 插件中未定义 jQuery
【发布时间】：2017-10-22 05:24:58
【问题描述】：

我尝试在我的 Angular 项目中导入 jquery-knob 插件，所以我通过 npm 安装了 jquery——效果很好。现在我想添加 jquery-knob（也通过 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

【问题讨论】：

标签： javascript jquery node.js angular webpack

【解决方案1】：

使用 angular2-knob 代替 jquery 插件，此包已使用 d3.js V4 为 Angular 4 完全重写

【讨论】：

【解决方案2】：

现在我找到了一个解决方案，也许它可以帮助某人:-)，我将旋钮放在自己的组件中并创建一个原生元素，然后在 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);
  }

【讨论】：