【问题标题】：Add jQuery-Knob in Angular 2在 Angular 2 中添加 jQuery-Knob
【发布时间】：2017-11-13 13:24:55
【问题描述】：

我是 Angular 2.0 的新手并使用 aspnetboilerplate 模板。

我正在尝试整合jQuery-Knob。

首先，我在scripts 中包含jquery.knob.min.js .angular-cli.json：

"scripts": 
[
    "../src/bsb-theme/js/jquery.validate.js",
    "../src/bsb-theme/js/jquery.knob.min.js"
]

然后，我在dashboard.component.html 中创建了一个input：

<input type="text" class="knob" value="40"
    data-width="125"
    data-height="125"
    data-thickness="0.25"
    data-angleArc="250"
    data-angleoffset="-35"
    data-fgColor="#00BCD4">

但输出只是一个文本框。

【问题讨论】：

尝试拨打$('.knob').knob();
我也试过了，但没用
是否有必要将它包含在 app.module.ts 中，如果需要如何做到这一点
看起来它不适用于 Angular 2。试试这个库：github.com/xzegga/angular2-knob
好的让我试试

标签： angular aspnetboilerplate jquery-knob

【解决方案1】：

jQuery-Knob 不适用于 Angular 2 开箱即用。

试试这个库：https://github.com/xzegga/angular2-knob

用法

导入角模块：

import { KnobModule } from "angular2-knob";

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [KnobModule]
  bootstrap: [AppComponent]
})

HTML 使用：

<div ui-knob [value]="value" [options]="knOptions"></div>

在 Angular 组件中配置选项：

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent{
  knOptions = {
    readOnly: true,
    size: 140,
    unit: '%',
    textColor: '#000000',
    fontSize: '32',
    fontWeigth: '700',
    fontFamily: 'Roboto',
    valueformat: 'percent',
    value: 0,
    max: 100
    trackWidth: 19,
    barWidth: 20,
    trackColor: '#D8D8D8',
    barColor: '#FF6F17',
    subText: {
      enabled: true,
      fontFamily: 'Verdana',
      font: '14',
      fontWeight: 'bold',
      text: 'Overall',
      color: '#000000',
      offset: 7
    },
  }
  value = 45; 
}

【讨论】：