angular - 将本地JSON文件映射为键值对数组

Question

通常，人们希望根据用户的选择使用不同的值集。例如，根据所选语言，同一事物有不同的表达方式，或者根据所选主题，同一类型的不同颜色。我目前正在尝试执行后者，因此我制作了几个具有相同键但不同值的 JSON 文件。这是“green_theme”JSON:

{
  "darker_color": "#1a3300",
  "lighter_color": "#4f9900",
  "error_color": "#b42805"
}

现在我希望组件从注入(inject)的服务中获取它们所需的颜色代码，如下所示:

<div [style.color]="themeService.getColorCodeByKey('darker_color')">example</div>

这就是我尝试实现该服务的方式:

@Injectable()
export class ThemeService {
    private readonly RED_SKIN_SOURCE = "assets/themes/red_skin.json"
    private readonly GREEN_SKIN_SOURCE = "assets/themes/green_skin.json" 
    private readonly YELLOW_SKIN_SOURCE = "assets/themes/green_skin.json"
    public skinData: {[key: string]: string} = {};

constructor(private http:Http) {
    this.setSkin(ThemeService.Skin.Green);
}

getColorCodeByKey(key: string): string {
    return this.skinData[key];
}

public setSkin(skin: ThemeService.Skin) {
    let observable: Observable<Response>;
    switch(skin) {
        case ThemeService.Skin.Red: {
            observable =  this.http.get(this.RED_SKIN_SOURCE);
            break;
        }
        case ThemeService.Skin.Yellow: {
            observable =  this.http.get(this.YELLOW_SKIN_SOURCE);
            break;
        }
        case ThemeService.Skin.Green: {
            observable =  this.http.get(this.GREEN_SKIN_SOURCE);
            break;
        }
    }

    observable.map((res: Response) => res.json().forEach(element => {
        this.skinData[element.key] = element;
    }));
  }
}
export namespace ThemeService {
    export enum Skin {
        Red, 
        Green,
        Yellow
    }
}

但似乎 setSkin 方法将 skinData 留空？如何正确地做到这一点？我是否太早映射 Observable 了？或者这不是 .json() 的工作原理？

或者，如果您有更好的想法如何实现这种类似键值的服务，我并不反对放弃 JSON.. 我什至考虑以自己的方式用自己的格式实现它，解析器

Answer 1

要修复当前的解决方案，您需要订阅 observable:

observable.subscribe((res: any) => { this.skinData = res; });

Angular 中的 HttpClient 默认解析 json 响应(与 fetch 不同)，并返回解析后的 SkinData，你可以立即使用它。