Narzędzia do tworzenia wykresów - Angular2 - javascript, charts, angular, zingchart

Jestem stosunkowo młodym użytkownikiem aplikacji internetowych, a co za tym idziewł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 mogę importować 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, który wskazuje, ż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
}]
}
}

Odpowiedzi:

Pełne ujawnienie, jestem członkiem 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"

Nie przestrzegając instrukcji ze strony post na blogu złamałeś składnię Angular 2, gdyten 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ć import które napisaliśmy, oraz wersję Angular 2, której używaliśmy (2.0.0 beta 9).

Jesteśmy w trakcie pisania zaktualizowanego wpisu na blogu dla Angulara 2.0.0 RC4, który będzie zawierał informacje o sposobie korzystania z nowego @angular symbole, które powiedziałeś, że próbujesz zaimportować

2) W przypadku powiązań zdarzeń istnieje dobre wytłumaczenie innego postu stackoverflow tutaj.