时间戳

首页 > 解决方案 > 将打字稿函数保存为对象变量（Angular 6）

javascript - 将打字稿函数保存为对象变量（Angular 6）

问题描述

我正在尝试使用 Google 图表创建一个简单的抽象，我创建了一个图表服务，它将作为抽象。模块提供选项和数据源，服务负责其余部分（数据由 REST API 提供）。

这是当前代码，仅适用于一种情况：

createCombo(comboBarLabels: String[], comboBarTypes: String[], options: any, element: any) {
    this.overviewService.getOverviewAggBarData().pipe(first()).subscribe(comboRequest => {
      for (const index of Object.keys(comboRequest.comboData)) {
        comboRequest.comboData[index].unshift(comboBarLabels[index]);
      }
      const data_array = [comboBarTypes, comboRequest.comboData[0],
        comboRequest.comboData[1], comboRequest.comboData[2]];
      google.charts.load('current', {'packages': ['corechart']});
      google.charts.setOnLoadCallback(() => {
        const data = ChartService.createDataTable(data_array);
        const chart = new google.visualization.ComboChart(element);
        chart.draw(data, options);
      });
    });
  }

我想要实现的是this.overviewService.getOverviewAggBarData()用条件函数删除和替换它，在python中是这样的：

def foo(a, b):  # Adds two numbers
    return a + b
a = foo
print(a(1, 2))  # Prints 3

制作如下所示的东西：

createCombo(comboBarLabels: String[], comboBarTypes: String[], options: any, element: any, source: any) {
  if (source == "OverviewAggBar"){
    get_data = this.overviewService.getOverviewAggBarData;
  } else {
    get_data = this.overviewService.getOverviewPieData;
  }
  get_data().pipe(first()).subscribe(comboRequest => {
    for (const index of Object.keys(comboRequest.comboData)) {
      comboRequest.comboData[index].unshift(comboBarLabels[index]);
    }
    const data_array = [comboBarTypes, comboRequest.comboData[0],
      comboRequest.comboData[1], comboRequest.comboData[2]];
    google.charts.load('current', {'packages': ['corechart']});
    google.charts.setOnLoadCallback(() => {
      const data = ChartService.createDataTable(data_array);
      const chart = new google.visualization.ComboChart(element);
      chart.draw(data, options);
    });
  });
}

我想这样做的原因是因为函数调用非常复杂，能够将这部分抽象出来为制作更通用的函数铺平了道路。实现相同目标的其他解决方案非常受欢迎！

解决了，新代码如下：

createCombo(comboBarLabels: String[], comboBarTypes: String[], options: any, element: any, source: string) {
    let getData: any;
    if (source === 'getAggData') {
      getData = this.overviewService.getOverviewAggBarData.bind(this);
    } else {
      getData = this.overviewService.getOverviewPieData.bind(this);
    }
    getData().pipe(first()).subscribe(comboRequest => {
      const data_array = [comboBarTypes];
      for (const index of Object.keys(comboRequest.comboData)) {
        comboRequest.comboData[index].unshift(comboBarLabels[index]);
        data_array.push(comboRequest.comboData[index]);
      }
      google.charts.load('current', {'packages': ['corechart']});
      google.charts.setOnLoadCallback(() => {
        const data = ChartService.createDataTable(data_array);
        const chart = new google.visualization.ComboChart(element);
        chart.draw(data, options);
      });
    });
  }

标签： javascriptangularfunctiontypescriptobject

解决方案

如果你有很多函数，你可以创建一个从源字符串到函数的“映射”。然后您可以向地图添加更多功能。像这样的东西：

class YourClass {
    private mapFromSourceToFunction: { [key: string]: () => Observable<YourComboResponseType> } = {
        'getAggData': () => this.overviewService.getOverviewAggBarData(),
        'getPipeData': () => this.overviewService.getOverviewPieData(),
        'getSomethingElse': () => this.overviewService.getSomethingElse()
    };

    createCombo(comboBarLabels: String[], comboBarTypes: String[], options: any, element: any, source: string) {
        let getData = this.mapFromSourceToFunction[source];

        // getData().pipe ...
    }
}

推荐阅读