图形工具 - Angular2

Question

我对Web应用程序比较陌生,因此我刚刚开始使用Angular2(没有使用angularJS)和Typescript.我正在尝试使用Zingchart绘制图表.我经历了5分钟的快速启动以及angular2页面中的教程,并且对它的工作方式有了一个很好的了解.我按照Zingchart页面上的说明使用这两个工具(https://blog.zingchart.com/2016/03/16/angular-2-example-zingchart/)在网页上创建了一个图表.但是,我似乎遇到了问题.1)我无法从@ angular/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"

通过不遵守博客文章中的说明,您在撰写本文时已经破坏了Angular 2的语法.用于导入函数及其名称的Angular 2语法从2.0.0 beta 9(编写此版本的版本)和2.0.0 RC0(我假设您正在使用的最小版本)更改.如果你想使用我们拥有的现有代码,你将不得不使用import我们编写的语句和我们使用的Angular 2的版本(2.0.0 beta 9).

我们正在为Angular 2.0.0 RC4编写更新的博客文章,其中将包括如何使用@angular您说您尝试导入的新符号

2)对于事件绑定有另一个计算器后一个很好的解释在这里.