将Wheelnav.js导入Angular 2/4

我试图在子菜单中找到一个体面的圆形菜单天。我非常喜欢wheelnav.js的图书馆。将Wheelnav.js导入Angular 2/4

现在我试图将它集成到我的Angular 4 Project中，但没有成功。我很想知道我应该怎么做。

我将简要介绍一下我的示例项目方法。

NPM安装wheelnav --save -dev
NPM安装拉斐尔--save -dev
NPM安装@类型/拉斐尔--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来说，我还是一个新鲜事物。

很多谢谢

来源

2017-08-24 MBChris

你使用cli吗？ –

我也已经将它集成到角度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 
    } 
    } 
}

来源

2017-08-24 10:55:46 MBChris

将Wheelnav.js导入Angular 2/4

回答

相关问题