如何在角度范围内全局声明对象数组

时间:2018-09-12 04:12:03

标签: angular typescript

在component.ts文件中的多个地方都有一个要使用的对象,我想知道如何在全局范围内声明它或以某种方式将其变成自己的静态类。

  calculateStandard(change) {
/* this function calculates the standard change for a transaction (most efficent denominations) */
// TODO make the denominations object a global variable or model
var denominations = [
  {name: "twenty", plural: "twenties", value: 20.00},
  {name: "ten", plural: "tens", value: 10.00},
  {name: "five", plural: "fives", value: 5.00},
  {name: "one", plural: "ones", value: 1.00},
  {name: "quarter", plural: "quarters", value: 0.25},
  {name: "dime", plural: "dimes", value: 0.10},
  {name: "nickle", plural: "nickles", value: 0.05},
  {name: "penny", plural: "pennies", value: 0.01}
];
var result = denominations.reduce(function(accumulator, currentDenomination) {   // iterates through the denomination object from top to bottom
  if (change >= currentDenomination.value) {
    var currentValue = 0.00;    // the amount of coins/bills for each denomination
    while (change >= currentDenomination.value) {
      currentValue ++;
      change -= currentDenomination.value;
      change = Math.round(change * 100) / 100   // prevents nasty decimal issues in TypeScript
    }
    if (currentValue > 1) {   // checks to see if the plural denomination name should be used or not
      accumulator.push({name: currentDenomination.plural, amount: currentValue});
    } else {
      accumulator.push({name: currentDenomination.name, amount: currentValue});
    }
    return accumulator;
  } else {
    return accumulator;
  }
}, []);   // the empty array is the initial accumulator
return result
}

denominations对象是我要全局声明的对象。

2 个答案:

答案 0 :(得分:3)

如果您有静态数据并想在全局范围内使用它-有一种最简单的方法来实现它

您也可以参考此Demo link

1。)创建denominations.ts-导出您的静态数据

export const denominations = [
  {name: "twenty", plural: "twenties", value: 20.00},
  {name: "ten", plural: "tens", value: 10.00},
  {name: "five", plural: "fives", value: 5.00},
  {name: "one", plural: "ones", value: 1.00},
  {name: "quarter", plural: "quarters", value: 0.25},
  {name: "dime", plural: "dimes", value: 0.10},
  {name: "nickle", plural: "nickles", value: 0.05},
  {name: "penny", plural: "pennies", value: 0.01}
];

2。)在您的AppModule上-导入面额并将其指定到提供商部分

// Import the newly create 'denominations.ts' as per step #1
import { denominations } from './denominations';


@NgModule({
  imports:      [ BrowserModule ],
  declarations: [ AppComponent ],
  providers: [ 
    // Named the provide to 'DENOMINATIONS' which holds the denominations data
    { provide: 'DENOMINATIONS', useValue: denominations }   
  ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

3。)在您的AppComponent上-将面额注入并在模板上使用

  

您可以对希望利用静态数据的任何组件执行@Inject方法

import { Component, Inject } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `{{ denominations | json }}`,  // Or *ngFor to loop the data.
})
export class AppComponent  {

  constructor(@Inject('DENOMINATIONS') public denominations: any[]) {
       // or try to console the denominations here
  }

}

答案 1 :(得分:1)

Services是您要寻找的。