將Wheelnav.js導入Angular 2/4

Question

我試圖在子菜單中找到一個體面的圓形菜單天。 我非常喜歡wheelnav.js的圖書館。

現在我試圖將它集成到我的Angular 4 Project中，但沒有成功。 我很想知道我應該怎麼做。

我將簡要介紹一下我的示例項目方法。

1. NPM安裝wheelnav --save -dev
2. NPM安裝拉斐爾--save -dev
3. 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來說，我還是一個新鮮事物。

很多謝謝

Answer 1

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