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

Question

几天来，我一直在努力寻找一个带有子菜单的像样的圆形菜单。我非常喜欢 wheelnav.js 的库。

现在我尝试将它集成到我的 Angular 4 项目中，但没有成功。我不太了解我应该如何做到这一点。

我将简要描述我对示例项目的方法。

1. npm install wheelnav --save -dev
2. npm install raphael --save -dev
3. 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 is not a constructor”这样的错误。我已经测试了几种可能性，但没有找到解决方案。

如果您能帮助我进行集成，我会很高兴。Angular 仍然是新事物。

非常感谢

Answer 1

只需几个步骤，您就可以在 Angular 应用程序中使用 Wheelnav。

1. 将 javascript 资源(wheelnav 和 raphael)添加到应用程序的 head 标记 (index.html)

2. 在您的应用程序中添加类型定义以使 wheelnav 可见

   declare var wheelnav: any;
   

3. 添加一些代码来创建一个轮子

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

我做了一个 Stackblitz 的小例子来展示该怎么做: https://stackblitz.com/edit/angular-a54edh

看看 app.component.ts 和模板。