Question

我正在尝试用子菜单找到一个像样的循环菜单。我非常喜欢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来说，这仍然是新事物。

非常感谢

Answer 1

在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和模板。

Answer 2

我还将它整合到了角度cli中。

{
  "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
    }
  }
}

将Wheelnav.js导入Angular 2/4

2 个答案: