将Wheelnav.js导入角2/4

Question

几天来我一直在找一个带子菜单的不错的循环菜单。我真的很喜欢wheelnav.js的图书馆。

现在，我试着将它集成到我的“角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不是构造函数“之类的错误。我已经测试过几种可能性，但没有找到解决办法。

如果你能帮助我进行整合，我会很高兴的。我还是个有棱角的新东西。

非常感谢

Answer 1

只有几个步骤，你必须做利用惠勒导航在你的角度应用。

1. 将javascript资源(惠尔纳夫和拉斐尔)添加到应用程序(index.html)的head标记中
2. 在应用程序中添加类型定义，以使轮导航可见。 宣布瓦轮导航:任何；
3. 添加一些代码来创建一个轮子 让轮子=新的轮对导航(“wheelDiv”)；wheel.initWheel("init“、”创建“、”导航“、”刷新“)；wheel.createWheel()；

我做了一个小的Stackblitz示例，展示了该做什么：https://stackblitz.com/edit/angular-a54edh

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

Answer 2

我也把它整合到角质层里。

{
  "project": {
    "name": "xxx"
  },
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.json",
      "prefix": "ch",
      "styles": [
        "../node_modules/bootstrap/dist/css/bootstrap.css",
        "../node_modules/jquery-ui-bundle/jquery-ui.css",
        "../node_modules/font-awesome/css/font-awesome.min.css",
        "styles.css"
      ],
      "scripts": [
        "../node_modules/jquery/dist/jquery.js",
        "../node_modules/jquery-ui-bundle/jquery-ui.js",
        "../node_modules/bootstrap/dist/js/bootstrap.js",
        "../node_modules/gsap/src/minified/TweenMax.min.js",
        "../node_modules/wheelnav/js/dist/raphael.min.js",
        "../node_modules/wheelnav/js/dist/raphael.icons.min.js",
        "../node_modules/wheelnav/js/dist/wheelnav.min.js"
      ],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
        }
    }
  ],
  "e2e": {
    "protractor": {
      "config": "./protractor.conf.js"
    }
  },
  "lint": [
    {
      "files": "src/**/*.ts",
      "project": "src/tsconfig.json"
    },
    {
      "files": "e2e/**/*.ts",
      "project": "e2e/tsconfig.json"
    }
  ],
  "test": {
    "karma": {
      "config": "./karma.conf.js"
    }
  },
  "defaults": {
    "styleExt": "css",
    "class": {
      "spec": false
    },
    "component": {
      "spec": true,
      "inlineStyle": false,
      "inlineTemplate": false
    }
  }
}