如何从 Google 图表回调访问 Angular 组件属性

Question

使用 angular-google-charts (Angular 13.2)，我需要创建一个带有自定义工具提示的 TreeMap。 GoogleChartComponent 有一个名为 generateTooltip 的选项属性，它接受一个回调函数。从该函数，我需要访问包含 GoogleChartComponent 的 Angular 组件 (chart.data) 的属性数据。但是我无法从回调函数中访问组件的属性。 Google 网站上的示例是可以理解的直接 JavaScript。

<!-- dashboard.component.html -->
<google-chart
  [data]="chart.data"
  [options]="chart.options"
  [title]="chart.title"
  [type]="chart.type"
  [columns]="chart.columns"
  [height]="chart.height"
  style="width: 100%"
></google-chart>

// dashboard.component.ts
import { Component, OnInit } from '@angular/core'
import { ChartType} from 'angular-google-charts'

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.scss']
})
export class DashboardComponent implements OnInit {
  public chart = {
    title: '',
    type: ChartType.TreeMap,
    data: [
      ['Global', null, 0, 0, 'Global'],
      ['Americas', 'Global', 0, 0, 'Global'],
      ['EMEA', 'Global', 0, 0, 'Global'],
      ['Acme - Lab 1YR (New)', 'Americas', 326000, 100, 'Susan Moore'],
      ['Flexa - DevOps 1YR (New)', 'Americas', 206000, 0, 'Jeremy Young'],
      ['Organo - CI/CD 1YR (New)', 'EMEA', 188000, 0, 'Sif Nilsen'],
      ['Ny Carlsberg Glyptotek - Automated Test Lab 300 devices 1YR (New)', 'EMEA', 212000, 0, 'Nils Peter Bjørnsen'],
      ['Dunder Mifflin - SCM 2YR (New)', 'Americas', 448000, 50, 'Justin Case']
    ],
    columns: [
      {type: 'string', label: 'Opportunity', role: 'domain'},
      {type: 'string', label: 'Parent', role: 'data'},
      {type: 'number', label: 'Amount', role: 'tooltip'},
      {type: 'number', label: 'Score', role: 'data'},
      {type: 'string', label: 'Owner', role: 'tooltip'}
    ],
    options: {
      minColor: '#f00',
      midColor: '#ddd',
      maxColor: '#0d0',
      headerHeight: 0,
      fontFamily: 'Nunito',
      fontSize: 13,
      fontColor: 'black',
      generateTooltip: this._showFullTooltip
    },
    height: 290,
  }

  constructor () {
  }

  _showFullTooltip(row: number, size: number, value: number) {
    // This is where I need to get values out of this.chart.data[row]
    const amount = size.toLocaleString('en-US', { style: 'currency', currency: 'USD', maximumFractionDigits: 0 });
    const tooltip = `<div style="color:#fff; background:#313A4B; padding: 10px; border-width:1px; border-style: solid; border-color:#fff;">${amount}</div>`
    return tooltip;
  }

}

在上面的示例中，传递给回调的参数之一是 row。我需要得到 this.chart.data[row]。这是行不通的。我认为这是因为回调函数在 Angular 之外工作，但我不确定将 _showFullTooltip() 函数连接到组件属性的最佳方法是什么。

有什么建议吗？

Answer 1

这不是 Angular 问题，而是 JS 作用域问题。不要分配 generateTooltip: this._showFullTooltip，而是像 generateTooltip: this._showFullTooltip.bind(this).

那样将作用域绑定到函数

当您传递函数引用时，this 关键字将成为 whoever/whatever 调用该函数的上下文。通过使用 .bind(this)，您可以使用当前受让人上下文 (DashboardComponent) 覆盖函数调用上下文。这应该允许您在 _showFullTooltip 函数中使用 this.chart.data[row]。

如何从 Google 图表回调访问 Angular 组件属性

How to access Angular component property from a Google Charts callback

callback

google-visualization

treemap

typescript

angular

如何从 Google 图表回调访问 Angular 组件 属性

How to access Angular component property from a Google Charts callback

callback

google-visualization

treemap

typescript

angular

如何从 Google 图表回调访问 Angular 组件属性