如何在 Angular 6 中使用 RoundSliderUI答案

【问题标题】：How to use RoundSliderUI in Angular 6如何在 Angular 6 中使用 RoundSliderUI
【发布时间】：2020-05-26 16:48:15
【问题描述】：

我想在我的角度应用程序中输入来自类型范围的输入。这确实有效。我已经包含了 jQuery，它也可以正常工作。在 index.html 中，我在 jquery CDN 之后包含了 roundSlider CDN。然后在 HTML 中的一个组件中放置以下内容：

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

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

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

这是根据http://roundsliderui.com/ 上的文档

现在什么都没有出现，我在互联网上到处搜索，但无法真正找出发生了什么。

我们将不胜感激！

【问题讨论】：

你的问题解决了吗？
@Soundar 是的，它花了一段时间，但我想通了。我会在这个帖子中添加一个答案。

标签： javascript jquery html angular

【解决方案1】：

好的，我想通了，我需要做的事情如下：

安装jQuery：npm install jquery --save
为 jQuery 安装类型：npm install @types/jquery --save-dev
安装 RoundSliderUI npm i round-slider 见 npm round-slider
在 tsconfig.app.json 中的 types 下添加 jQuery；我的结果是这样的：

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

在 angular.json 中添加脚本的路径：

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

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

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

在 typings.d.ts 中添加以下内容，如果文件不存在，请在 index.html 所在的文件夹中创建它。

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

现在您应该可以在任意位置添加滑块<div id="slider"></div>

希望这对一些人有所帮助！

【讨论】：

【解决方案2】：

要在 Angular 应用中使用 jquery，您需要这样做

npm install jquery --save

然后在页面内添加这个导入

import * as $ from "jquery";

在 angular.json 中，请在脚本和样式部分下包含 roundslider.js 和 roundslider.css 文件。

您也可以参考 Angular 2 集成的 github 问题https://github.com/soundar24/roundSlider/issues?q=angular+is%3Aopen

【讨论】：

【解决方案3】：

在ngAfterViewInit() 方法中执行此代码：

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

【讨论】：

【解决方案4】：

目前 roundSlider 没有对 Angular 的内置支持，但您仍然可以通过 jQuery 方式将其与您的 Angular 应用程序集成。

查看下面的简单演示：

https://stackblitz.com/edit/angular-yabjjf

import { Component } from '@angular/core';
import $ from 'jquery';
window.jQuery = $;
import 'round-slider';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';

  ngOnInit() {

    $("#slider1").roundSlider({
      value: 45
    });

  }
}

【讨论】：