javascript - 将Wheelnav.js导入Angular 2/4

我试图找到一个不错的带有子菜单的圆形菜单几天。
我真的非常喜欢wheelnav.js库。

现在，我尝试将其集成到我的Angular 4项目中，但没有成功。
我缺少对应该如何做的理解。

我将简要描述我对示例项目的处理方式。


npm install wheelnav --save -dev
npm install raphael --save -dev
npm install @types/raphael --save -dev


我创建了一个新目录，如下所示。
... ts文件

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


@Component({
  selector: 'ch-par-vaporizer',
  templateUrl: './par-vaporizer.component.html',
  styleUrls: ['./par-vaporizer.component.css']
})

export class ParVaporizerComponent {

twheel = require('../../../node_modules/wheelnav/js/dist/wheelnav.js');
twheeln:any;
  constructor() {
    this.twheeln = new this.twheel.wheelnav('wheelDiv');
    console.log(this.twheeln);
    this.twheeln.createWheel("test");
    console.log(this.twheeln);

   }
}

如果要在控制台中输出对象，则只会出现诸如“ this.twhell不是构造函数”之类的错误。
我已经测试了几种可能性，但没有解决方案。

如果您能帮助我进行整合，我将非常高兴。
Angular还是一个新东西。

非常感谢

最佳答案

在Angular应用程序中使用Wheelnav只需要做几步。


将javascript资源（wheelnav和raphael）添加到应用程序的head标记（index.html）
在您的应用程序中添加类型定义以使wheelnav可见

declare var wheelnav: any;

添加一些代码来创建轮子

let wheel = new wheelnav("wheelDiv");
wheel.initWheel(["init", "create", "navigate", "refresh"]);
wheel.createWheel();

我做了一个小的Stackblitz示例，显示了如何做：
https://stackblitz.com/edit/angular-a54edh

只需看看app.component.ts和模板。