Angularで連想配列をServiceとして提供する

前提

連想配列の元となるデータはファイルとしてサーバに置いてある
ファイルは巨大で読み込みに時間がかかる

対応概要

連想配列をObservableで用意して、生成が完了する前に参照されてもよいように作る

実装

Service

マップを作る側

サービスのインスタンスが生成されると同時にサーバ上のファイルを読み込む
ファイルが読み込めたらpipeを使ってObservableのまま連想配列化する
連想配列の参照もpipeを使ってObservableのまま値を渡す

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

@Injectable({ 
  providedIn: 'root'
})
export class MapService {
  nameMap:Observable<{[name: string]: string}>

  constructor(private http: HttpClient) {
    let url = "../assets/sample.txt"
    this.nameMap = this.http.get(url, {responseType:'text'}).pipe(map(data => {
      return data.split('\n')
      .map(x => x.split("="))
      .reduce((map, arr) => ({
        ...map,
        [arr[0]]: arr[1]
      }), {});
    }));
  }

  getValue(name) {
    return this.nameMap.pipe(map(x => x[name]))
  }
}

Component

マップを使う側

Observableで値が帰ってくるのでsubscribeで値を取り出す

  constructor(private svs: MapService) {
    svs.getValue("aaa").subscribe(x => console.log(x))
  }