Erstellen Angular2 Komponente/directive Wrapper für Dygraphs

Ich habe eine bestehende AngularJS Anwendung, die eine Richtlinie zu ‚wrap‘ verwendet die DyGraphs JavaScript-Bibliothek und das gut funktioniert.Erstellen Angular2 Komponente/directive Wrapper für Dygraphs

Ich untersuche jedoch die Migration zu Angular2 und bemühe mich, eine Angular2-Komponente (oder Direktive) zu erstellen, um DyGraphs einzubinden, und konnte keine gezielte Hilfe finden.

Ich habe bei ähnlichen Charting Bibliotheken sieht und wie diese verpackt worden und versuchte, das gleiche mit DyGraphs zu tun, sondern schlug eine Reihe von Hürden.

Ich wäre dankbar für jede Beratung, wie Sie mit dieser Aufgabe fortfahren, da es wahrscheinlich ist, dass wir eine Reihe von anderen JS-Bibliotheken, darunter mehrere von Vis in naher Zukunft zu wickeln.

Vielen Dank im Voraus.

aktualisieren

Zusätzlich zu große Antwort Thierry, habe ich den Code Refactoring, wie unten dargestellt:

index.html:

<html> 
    <head> 
    <title>My Application</title> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="styles.css"> 
    <!-- 1. Load libraries --> 
    <!-- Polyfill(s) for older browsers --> 
    <script src="node_modules/es6-shim/es6-shim.min.js"></script> 
    <script src="node_modules/zone.js/dist/zone.js"></script> 
    <script src="node_modules/reflect-metadata/Reflect.js"></script> 
    <script src="node_modules/systemjs/dist/system.src.js"></script> 
    <!-- dygraph --> 
    <script src="node_modules/dygraphs/dygraph-combined.js"></script> 
    <!-- 2. Configure SystemJS --> 
    <script src="systemjs.config.js"></script> 
    <script> 
     System.import('app').catch(function(err){ console.error(err); }); 
    </script> 

    </head> 
    <!-- 3. Display the application --> 
    <body> 
    <my-app>Loading...</my-app> 
    </body> 
</html>

app/app.component.ts

import { Component } from '@angular/core'; 
import { DygraphComponent } from './dygraph.component'; 
@Component({ 
    template: ` 
    <dygraph [title]="title"></dygraph> 
    `, 
    directives: [ DygraphComponent ] 
}) 
export class AppComponent { 
    title:string = 'some title'; 
}

app/dygraph.component.ts:

import { Component, Input, ViewChild, ElementRef, AfterViewInit } from '@angular/core'; 

declare var Dygraph:any; 

@Component({ 
    selector: 'dygraph', 
    template: ` 
    <div #graph></div> 
    ` 
}) 
export class DygraphComponent implements AfterViewInit { 

    @ViewChild('graph') 
    elt:ElementRef; 

    @Input() 
    title:string; 

    ngAfterViewInit() { 

    new Dygraph(this.elt.nativeElement, "data.txt", {}); 

    } 

}

aber wenn ich versuche, um den Code auszuführen, erhalte ich einen 404-Fehler auf traceur. Irgendwelche Vorschläge zur Lösung dieses sehr dankbar erhalten.

Quelle

2016-05-24 James Saunders

Sie eine solche Komponente mit Ein- und die @ViewChild Dekorateur auf diese Weise implementieren könnte:

@Component({ 
    selector: 'dygraph', 
    template: ` 
    <div #graph></div> 
    ` 
}) 
export class DygraphComponent { 
    @ViewChild('graph') 
    elt:ElementRef; 

    @Input() 
    title:string; 

    (...) 

    ngAfterViewInit() { 
    new Dygraph(this.elt.nativeElement, "ny-vs-sf.txt", { 
     legend: this.legend, 
     title: this.title, 
     (...) 
    }); 
    } 
}

Dann fügen Sie die Direktive in der directives Attribut der Komponente, die Sie es verwenden möchten, und das Element definieren:

@Component({ 
    tempalte: ` 
    <dygraph [title]="title"></dygraph> 
    `, 
    directives: [ DygraphComponent ] 
}) 
export class SomeComponent { 
    title:string = 'some title'; 
}

Quelle

2016-05-24 12:08:20

Ich habe Ihren Code implementiert und hinzugefügt: dygraph.component.ts: importieren {Komponente, Input, ViewChild, ElementRef, AfterViewInit } aus '@ angular/core'; app.component.ts: import {Component, DygraphComponent} von './dygraph.component'; und enthalten: in index.html. Allerdings bekomme ich die folgenden Fehler: app/dygraph.componence.ts: Fehler TS2304: Kann den Namen 'Dygraph' nicht finden. app/app.component.ts: error TS2305: Modul ' "./app/dygraph.component"' hat keine exportierte Mitglied 'Komponente'. –

in der Tat ist es auf Kompilierungsebene. Hier gibt es zwei Möglichkeiten. Sie könnten dies hinzufügen: 'declare var Dygraph: any' oder install typings für die Bibliothek, falls vorhanden (' typings install library-name') ... –

Excellent. Danke Thierry. Durch Einschließen der Deklarations-Var-Zeile in dygraph.component.ts wird das erste Problem gelöst. Allerdings bekomme ich noch folgendes: Modul '"F: /angular2/dygraphs2/app/dygraph.component"' hat kein exportiertes Mitglied 'Komponente'.Es ist unklar, warum das so ist. Ich exportiere keine Komponenten, erwarte aber nicht. Danke im Voraus. –

Erstellen Angular2 Komponente/directive Wrapper für Dygraphs

Antwort

Verwandte Themen