Angular

Question

我在 Angular 项目的各个组件中使用印度各州数据数组，如下所示。

我知道一种方法是将其作为集合添加到后端数据库中。但我不想每次下拉菜单需要时都调用 API 来获取州名称。

最好的方法是在 angular 的一个地方定义它，而不是在每个组件中单独定义这个常量。

const States = [
 { name:"Assam",  code:"18",  tin:"AS" },
  { name:"Bihar",  code:"10",  tin:"BH" },
  { name:"Chandigarh",  code:"04",  tin:"CH" },
....
]

Answer 1

您可以创建一个文件，constArrays.ts 在应用程序根目录附近的某处。然后，您可以 export 常量值，如下所示：

// constArrays.ts

export const States = [
 { name:"Assam",  code:"18",  tin:"AS" },
  { name:"Bihar",  code:"10",  tin:"BH" },
  { name:"Chandigarh",  code:"04",  tin:"CH" },
....
]

然后您可以像这样在任何其他文件中导入和使用它：

import * as constArrays from 'path/to/file/constArrays';
let states = constArrays.States;

Answer 2

我想最好的做法是创建一个 service - 例如StatesService 将根据需要在模块或应用程序的根中提供。我会添加一个 getStates() 方法，该方法会 return observable 个州。

这样，如果您的体系结构发生变化，您就可以准备好可以从外部源异步 return 编辑您的数据，并且您的所有代码仍然有效。

示例实现：

export class State {
  name: string;
  code: string;
  tin: string;
}

@Injectable({
  providedIn: 'root',
})
export class StatesService {
    private states: State[] = [
    { name:"Assam",  code:"18",  tin:"AS" },
     { name:"Bihar",  code:"10",  tin:"BH" },
     { name:"Chandigarh",  code:"04",  tin:"CH" },
   ];

   getStates(): Observable<State[]> {
     return of(this.states);
   }
}

Answer 3

我觉得用一个配置文件很容易使用和维护。

states.config.json

[
  { "name":"Assam",  "code":"18",  "tin":"AS" },
  { "name":"Bihar",  "code":"10",  "tin":"BH" },
  { "name":"Chandigarh",  "code":"04",  "tin":"CH" }
]

需要的时候再导入

import states from 'src/assets/states.config.json';

Angular - 如何重用标准数据数组

Angular - how to reuse a standard data array

angular-arrays