如何在Angular 6中使用RoundSliderUI [英] How to use RoundSliderUI in Angular 6

问题描述

我想在我的角度应用程序中输入来自类型范围的输入.这实际上是有效的.我已经包括了jQuery，而且效果很好.在index.html中，我在jquery CDN的之后包含了roundSlider CDN.然后，在HTML的组件之一内部放置以下内容:

I want to have an input from the type range in my angular application. That's actually working. I've included jQuery what's working fine as well. In the index.html I've included the roundSlider CDN after the jquery CDN. Then inside one of the components in the HTML I place the following:

<div id="range"></div>

在该组件TS文件中，我在ngOnInit()中插入了以下内容:

In that components TS file I've inserted the following inside the ngOnInit():

$("#range").roundSlider({
  radius: 80,
  circleShape: "pie",
  sliderType: "min-range",
  showTooltip: false,
  value: 11,
  startAngle: 315
});

根据 http://roundsliderui.com/

现在什么也没有出现，我已经在互联网上到处搜索了，但无法真正发现正在发生的事情.

Now nothing really appears, I've searched everywhere on the internet but can't really find out what's happening.

我们将不胜感激！

推荐答案

好，我知道了，我需要做的事情如下:

Okay, I figured things out, what I needed to do was as follows:

1. 安装jQuery:npm install jquery --save
2. 安装jQuery的类型:npm install @types/jquery --save-dev
3. 安装RoundSliderUI npm i round-slider参见 npm圆形滑块
4. 在tsconfig.app.json中，在类型下添加jQuery；对我来说结果是这样的:

1. Install jQuery: npm install jquery --save
2. Install typings for jQuery: npm install @types/jquery --save-dev
3. Install RoundSliderUI npm i round-slider see npm round-slider
4. In tsconfig.app.json add jQuery under types; the result for me looks like this:

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "types": [
      "jquery"
    ]
  },
  "exclude": [
    "src/test.ts",
    "**/*.spec.ts"
  ]
}

1. 在angular.json中，将路径添加到脚本:

"scripts": [
  "./node_modules/jquery/dist/jquery.min.js",
  "./node_modules/round-slider/dist/roundslider.min.js"
]

1. 还在angular.json中添加样式下css文件的路径:

"styles": [
  "src/styles.scss",
  "./node_modules/round-slider/dist/roundslider.min.css"
]

1. 在types.d.ts中添加以下内容，如果该文件不存在，请在index.html所在的文件夹中也创建该文件.

interface JQuery {
  roundSlider(options?: any): any;
}

1. 现在您应该可以在<div id="slider"></div>
的任何位置包含滑块了

1. Now you should be able to include a slider anywhere <div id="slider"></div>

希望这对某些人有帮助！

Hope this will help for some!

这篇关于如何在Angular 6中使用RoundSliderUI的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！