Question

我有一个简单的要求 - 将一堆变量分成自己的文件并将其导入另一个打字稿文件。我不想开始创建新的提供者和方法 - 我认为它需要太多的工作。

我的目标：将变量移至graphDefs.ts，然后在home.ts中访问它们，并在home.html（home.ts模板）中访问它们

我有一个有效的解决方案，但我不确定是否：

这种方法是可以接受的并且不是不好的做法
不确定是否有办法直接使导入的变量可以访问模板文件而没有像我下面那样的新变量

非常感谢你的想法。

我的graphDefs.ts（这些xxxxChartData变量中还有几个，为简洁而缩短了

// common gauge defs

export var speedChartData:any =  {
    chartType: 'Gauge',
    dataTable: [
      ['Label', 'Value'],
      ['Speed', 0],
    ],
    options: {
      animation: {easing: 'out'},
      greenFrom: 1, greenTo: 60,
      yellowFrom: 60, yellowTo: 110,
      redFrom: 110, redTo:220,
      minorTicks: 10,
      min: 0, max: 160,
      greenColor: '#019875',
      yellowColor: '#F9BF3B',
      redColor: '#EF4836',
    }
  };

  export var tempChartData:any =  {
    chartType: 'Gauge',
    dataTable: [
      ['Label', 'Value'],
      ['Temp.', 0],
    ],
    options: {
      animation: {easing: 'out'},
      greenFrom: 1, greenTo: 60,
      yellowFrom: 60, yellowTo: 110,
      redFrom: 110, redTo:420,
      minorTicks: 10,
      min: -40, max: 420,
      greenColor: '#019875',
      yellowColor: '#F9BF3B',
      redColor: '#EF4836',
    }
  };

在home.ts：

import * as graphs from './graphDefs';
speedChartData:any;
tempChartData:any;

然后在home.ts

的构造函数中

this.speedChartData = graphs.speedChartData;
this.tempChartData = graphs.tempChartData;

（我正在做以上所以我可以像这样访问模板文件home.html中的导入数据：

<ion-col col-50>
   <google-chart #speed [data]="speedChartData" ></google-chart>
</ion-col>
<ion-col col-50>
    <google-chart #temp [data]="tempChartData"></google-chart>
</ion-col>

Angular - splitting变量通过外部模块定义到另一个文件中

0 个答案: