Graphing tools - Angular2

Question

저는 웹 응용 프로그램에 비교적 익숙하지 않기 때문에 Angular2 (angularJS를 사용하지 않았습니다)와 Typescript를 사용하기 시작했습니다. Zingchart를 사용하여 그래프를 그려 봅니다. 나는 angular2 페이지의 튜토리얼뿐만 아니라 5 분 빠른 시작을 통해 어떻게 작동하는지에 대한 괜찮은 아이디어를 얻었습니다. Zingchart 페이지의 지침에 따라 두 도구 (https://blog.zingchart.com/2016/03/16/angular-2-example-zingchart/)를 사용하여 웹 페이지에서 차트를 만들었습니다. 그러나, 나는 문제가있는 것 같습니다. 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 문과 우리가 사용한 각도 2 (2.0.0 베타 9) 버전을 사용해야합니다.

우리는 당신이 이벤트 바인딩의 경우

2) 를 가져 오기 위해 노력하고 말했다 새로운 @angular 기호를 사용하는 방법을 포함 각도 2.0.0 RC4에 대한 업데이트 된 블로그 게시물을 작성하는 과정에있어 또 다른 stackoverflow 게시물 here에 대한 좋은 설명이 있습니다.