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

我认为最好的做法是创建一个服务——例如，根据需要在应用程序的模块或根目录中提供StatesService。我将添加一个getStates()方法来返回状态的可观察对象。

这样，万一你的架构发生变化，你就可以从外部源异步返回你的数据，而你所有的代码仍然是有效的。

示例实现:

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 2

您可以在应用程序根目录附近创建一个文件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 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';