Narzędzia do tworzenia wykresów - Angular2

Question

Jestem stosunkowo młodym użytkownikiem aplikacji internetowych i dlatego właśnie zaczynam używać Angular2 (NIE używałem angularJS) i maszynopisu. Próbuję użyć Zingchart do wykreślenia wykresu. Przeszedłem przez 5 minutowy szybki start, a także samouczek na stronie angular2 i otrzymałem przyzwoity pomysł, jak to działa. Postępowałem zgodnie z instrukcjami na stronie Zingchart, aby utworzyć wykres na stronie internetowej za pomocą dwóch narzędzi (https://blog.zingchart.com/2016/03/16/angular-2-example-zingchart/). Jednak wydaje mi się, że mam problemy. 1) Nie można importować funkcji AfterView z @ kątowego/rdzenia. Chociaż strona mówi, że muszę używać angular2/core, używam @ angle/core jako folderu źródłowego do importowania modułów. angular2/core nie jest rozpoznawany. 2) Gdy istnieją funkcje powiązane z obiektem zingchart (przykład - zingchart.render(), zingchart.exec()), wystąpił błąd z informacją, że nie można znaleźć zingchart. Nie jestem też pewien, co tu się dzieje źle.

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

Pełne ujawnienie, należę do zespołu 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"

przez niezastosowanie się do instrukcji z blog post masz złamane składnię Kątowymi 2, gdy ten post został napisany. Składnia Angular 2 do importowania funkcji i ich nazwy została zmieniona z wersji 2.0.0 beta 9 (wersja dla której została napisana) i wersji 2.0.0 RC0 (minimalna wersja, z której zakładam, że korzystasz). Jeśli chcesz użyć istniejącego kodu, tak jak go mamy, będziesz musiał użyć napisanych przez nas instrukcji import i wersji Angular 2, której używaliśmy (2.0.0 beta 9).

Jesteśmy w trakcie pisania zaktualizowaną blogu kątowego 2.0.0 RC4, który obejmie, jak korzystać z nowych @angular symbole Mówiłeś, że próbujesz importować

2) Dla wiązania zdarzeń istnieje dobre wyjaśnienie na innym stackoverflow post here.