Angular - 如何重用標准數據數組

Question

我在我的 Angular 項目的各個組件中使用如下印度州數據數組。

我知道一種方法是將其作為集合添加到后端數據庫中。 但我不想每次下拉需要時都調用 API 來獲取 state 名稱。

在 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';