Importieren von Wheelnav.js in Angular 2/4

Question

Ich versuche, ein anständiges Rundmenü mit Untermenü für Tage zu finden. Ich mag die Bibliothek von radnav.js sehr gut.

Jetzt habe ich versucht, dies in mein Angular 4 Projekt zu integrieren, aber ohne Erfolg. Ich vermisse etwas das Verständnis, wie ich das tun sollte.

Ich beschreibe kurz meinen Ansatz zu einem Beispielprojekt.

1. npm installieren wheelnav --save -dev
2. npm raphael installieren --save -dev
3. npm @ Arten installieren/raphael --save -dev

Ich habe ein neues erstellt Verzeichnis, das so aussieht. ... 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); 

    } 
} 

Datei Wenn ich das Objekt in der Konsole ausgegeben werden soll, bekomme ich nur Fehlermeldungen wie „this.twhell kein Konstruktor ist“. Ich habe bereits mehrere Möglichkeiten getestet, komme aber zu keiner Lösung.

Ich würde mich freuen, wenn Sie mir bei der Integration helfen könnten. Bin noch etwas neues mit Angular.

Vielen Dank

Answer 1

Ich habe auch integriert in die Winkel-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 
    } 
    } 
}