Events 在Angular v2中处理Google图表中的select事件
我正在使用Angular v2(Events 在Angular v2中处理Google图表中的select事件,events,google-visualization,angular,Events,Google Visualization,Angular,我正在使用Angular v2(2.0.0-beta-1),并使用Google图表显示一个简单的图表 import {Component, View} from "angular2/core"; import {Http, HTTP_PROVIDERS} from "angular2/http"; import {OnInit, OnDestroy} from 'angular2/core'; declare let io: any; declare let google: any; @Co
2.0.0-beta-1
),并使用Google图表显示一个简单的图表
import {Component, View} from "angular2/core";
import {Http, HTTP_PROVIDERS} from "angular2/http";
import {OnInit, OnDestroy} from 'angular2/core';
declare let io: any;
declare let google: any;
@Component({
selector:'default',
viewProviders: [HTTP_PROVIDERS]
})
@View({
templateUrl: 'app/default/default.html'
})
export class DefaultPage implements OnInit, OnDestroy {
charttitle: string;
data: any;
options: any;
timerToken: any;
chart: any;
socket: any;
constructor(http: Http) {
}
ngOnInit() {
console.log("onInit");
this.charttitle = "Sample Graph using live data";
this.options = {
title: "My Daily Activities",
is3D: true
};
this.socket = io();
this.socket.on("data_updated", (msg) => {
this.data = new google.visualization.DataTable();
this.data.addColumn('string', 'Task');
this.data.addColumn('number', 'Hours per Day');
this.data.addRows(5);
let data = JSON.parse(msg).activityData;
for (let i = 0; i < data.length; i++) {
let act = data[i];
this.data.setCell(i, 0, act.act);
this.data.setCell(i, 1, act.value);
}
this.chart.draw(this.data, this.options);
});
this.chart = new google.visualization.PieChart(document.getElementById('chart_div'));
google.visualization.events.addListener(this.chart, 'select', this.mySelectHandler);
}
mySelectHandler() {
console.trace();
console.log("Chart: " + this);
//let selectedItem = this.chart.getSelection()[0];
/*if (selectedItem) {
let value = this.data.getValue(selectedItem.row, 0);
console.log("The user selected: " + value);
}*/
}
ngOnDestroy() {
console.log("onDestroy");
this.socket.disconnect();
}
}
当选择饼图上的某个元素时,实际的事件处理程序被触发,事件被注册。但是这个引用的所有Angular JS 2范围变量都不在范围内。这就好像谷歌图表可视化库在自己的范围内运行一样
我知道Angular JS有Angular Charts指令,但我们不能使用该指令,因为该公司只想使用Angular v2
有没有一种方法可以让Google Charts API将事件“冒泡”到Angular2上下文/更改检测中运行的事件处理程序中。如果希望您的
mySelectHandler
参与Angular2上下文/更改检测,您可以利用NgZone
,如下所述。这样,您在此函数中所做的更改将相应地更新视图
import {NgZone} from 'angular2/core';
export class DefaultPage implements OnInit, OnDestroy {
constructor(private ngZone:NgZone) {
}
ngOnInit()
this.chart = new google.visualization.PieChart(
document.getElementById('chart_div'));
google.visualization.events.addListener(
this.chart, 'select', () => {
this.ngZone.run(() => {
this.mySelectHandler();
});
}
);
}
}
希望我正确理解了你的问题。
Thierry嗨,谢谢你的回答,我应用了这个,但是现在处理程序没有运行,我不确定Google Charts是否认为没有事件处理程序。我确信这样的方法是正确的,因为使用Angular 2和Javascript API使用它们自己的作用域或生命周期是不可能的。嗨,我刚刚意识到!效果很好。谢谢你的帮助。
import {NgZone} from 'angular2/core';
export class DefaultPage implements OnInit, OnDestroy {
constructor(private ngZone:NgZone) {
}
ngOnInit()
this.chart = new google.visualization.PieChart(
document.getElementById('chart_div'));
google.visualization.events.addListener(
this.chart, 'select', () => {
this.ngZone.run(() => {
this.mySelectHandler();
});
}
);
}
}