グラフツール - Angular2

Question

私はWebアプリケーションには比較的新しいので、Angular2（angularJSを使用していない）とTypescriptを使用し始めたところです。グラフをプロットするためにZingchartを使用しようとしています。私はangle2のページのチュートリアルだけでなく、5分のクイックスタートに行き、それがどのように動作するかについてまともな考えを得ました。私はZingchartページの指示に従って、2つのツール（https://blog.zingchart.com/2016/03/16/angular-2-example-zingchart/）を使用してWebページ上にグラフを作成しました。しかし、私は問題を抱えているようです。 1）@ Anger/CoreからAfterViewをインポートできません。このページでは、angular2/coreを使用しなければならないと言いますが、モジュールをインポートするためのソースフォルダとして@ angular/coreを使用しています。 angular2/coreは認識されません。 2）zingchartオブジェクト（例 - zingchart.render（）、zingchart.exec（））にバインドされている関数がある場合、zingchartが見つからないというエラーがあります。私はここで何が起こっているのか分からない。

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

私は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"

blog postこの記事が書かれたときには、角2の構文を破りました。関数とその名前をインポートするためのAngular 2構文は、2.0.0 beta 9（これが書かれたバージョン）と2.0.0 RC0（私が使用していると仮定した最小バージョン）から変更されました。既存のコードをそのまま使用したい場合は、記述したimportの文と、使用したAngular 2のバージョン（2.0.0 beta 9）を使用する必要があります。

私たちは、あなたがイベントバインディングについて

2） をインポートしようとしていると述べ、新たな@angular記号を使用する方法が含まれますアンギュラ2.0.0 RC4の更新されたブログ記事を書いている過程にいます別のstackoverflowポストhereの良い説明があります。