在Angular v2中处理来自Google图表的选择事件 [英] Handling select event from Google Charts in Angular v2

问题描述

我正在使用Angular v2(2.0.0-beta-1)，并使用Google图表显示一个简单的图表.

I am using Angular v2 (2.0.0-beta-1) and displaying a simple chart using Google Charts.

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();
  }
}

我的问题是以下几行.

google.visualization.events.addListener(this.chart, 'select', this.mySelectHandler);

注册事件是指在选择饼图上的某个元素时触发实际的事件处理程序.但是此引用的所有Angular JS 2作用域变量都不在作用域内.就像Google Chart可视化库在其自己的范围内运行一样.

The event is registered is when an element on the pie chart is selected the actual event handler is fired. But all the Angular JS 2 scope variables referenced by this aren't in scope. It's as if the Google Chart visualization library is running in its own scope.

我知道Angular JS具有Angular-Charts指令，但是我们不能使用它，因为该公司只想使用Angular v2.

I know that Angular JS has the Angular-Charts directive but we cannot use that as the company wants to use Angular v2 only.

有没有办法让Google Charts API将事件冒泡"到在Angular组件范围内运行的事件处理程序.

Is there a way I can get the Google Charts API to 'bubble' an event to the event handler running on the scope of the Angular component.

推荐答案

如果您希望mySelectHandler参与Angular2上下文/更改检测，则可以使用NgZone，如下所述.这样，您在此功能中所做的更改将相应地更新视图.

If you want that your mySelectHandler takes part within the Angular2 context / change detection, you could leverage NgZone, as described below. This way, the changes you make in this function will update the view accordingly.

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();
         });
       }
    );
  }
}

希望我正确理解了您的问题. 蒂埃里

Hope that I correctly understood your question. Thierry

这篇关于在Angular v2中处理来自Google图表的选择事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！