Strumenti grafici - Angular2

Question

Sono relativamente nuovo alle applicazioni Web e quindi sto appena iniziando ad utilizzare Angular2 (NON ho usato angularJS) e Typescript. Sto cercando di usare Zingchart per tracciare un grafico. Ho seguito l'avvio rapido di 5 minuti e il tutorial nella pagina angular2 e ho avuto un'idea decente di come funziona. Ho seguito le istruzioni sulla pagina Zingchart per creare un grafico sulla pagina web utilizzando i due strumenti (https://blog.zingchart.com/2016/03/16/angular-2-example-zingchart/). Tuttavia, mi sembra di avere problemi. 1) Non riesco a importare AfterView da @ angular/core. Anche se la pagina dice che devo usare angular2/core, sto usando @ angular/core come cartella sorgente da cui importare i moduli. angular2/core non viene riconosciuto. 2) Quando ci sono funzioni legate all'oggetto zingchart (esempio: zingchart.render(), zingchart.exec()), c'è un errore che dice che la zingchart non può essere trovata. Non sono sicuro di cosa stia succedendo qui.

import { Component, NgZone, AfterViewInit, OnDestroy }  from '@angular/core'; 

class Chart { 
id: String; 
data: Object; 
height: any; 
width: any; 
constructor(config: Object) { 
this.id = config['id']; 
this.data = config['data']; 
this.height = config['height'] || 300; 
this.width = config['width'] || 600; 
} 
} 

@Component({ 
selector : 'zingchart', 
inputs : ['chart'], 
template : ` 
<div id='{{chart.id}}'></div> 
` 
}) 
class ZingChart implements AfterViewInit, OnDestroy { 
chart : Chart; 
constructor(private zone:NgZone) { 
} 

ngAfterViewInit() { 
this.zone.runOutsideAngular(() => { 
zingchart.render({ 
id : this.chart['id'], 
data : this.chart['data'], 
width : this.chart['width'], 
height: this.chart['height'] 
}); 
}); 
} 
ngOnDestroy() { 
zingchart.exec(this.chart['id'], 'destroy'); 
} 
} 

//Root Component 
@Component({ 
selector: 'my-app', 
directives: [ZingChart], 
template: ` 
<zingchart *ngFor="#chartObj of charts" [chart]='chartObj'></zingchart> 
`, 
}) 
export class App { 
charts : Chart[]; 
constructor() { 
this.charts = [{ 
    id : 'chart-1', 
    data : { 
    type : 'line', 
    series : [{ 
     values :[2,3,4,5,3,3,2] 
    }], 
    }, 
    height : 400, 
    width : 600 
}] 
} 
} 

Answer 1

Divulgazione completa, sono un membro del team di ZingChart.

1) "I am not able to import AfterView from @angular/core. Although the page says that I must be using angular2/core I am using @angular/core as the source folder"

da non conformi con le istruzioni dal blog post avete rotto la sintassi per angolare 2 quando questo post è stato scritto. La sintassi Angular 2 per l'importazione di funzioni e il loro nome sono cambiati da 2.0.0 beta 9 (la versione per cui è stato scritto questo) e 2.0.0 RC0 (la versione minima presumo che tu stia utilizzando). Se si desidera utilizzare il codice esistente così come è, sarà necessario utilizzare le dichiarazioni import che abbiamo scritto e la versione di Angular 2 che abbiamo utilizzato (2.0.0 beta 9).

Siamo in procinto di scrivere un post sul blog aggiornato per angolare 2.0.0 RC4 che includerà come utilizzare le nuove @angular simboli hai detto che sta cercando di importare

2) Per binding di eventi c'è una buona spiegazione su un altro post StackOverflow here.