如何读取 Json 文件并作为服务在任何地方使用？

Question

我需要在 Angular 中创建带有翻译的全局词典，并且我想在每个组件中使用该词典。我创建了一个自定义服务：

import { Injectable } from "@angular/core";
import _dictionary from "../assets/js/dictionary.json";

interface IWords {
  [key: string]: string;
}

@Injectable({
  providedIn: "root"
})
export class DictionaryService {
  private dictionary = new Map<string, IWords>();

  constructor() {
    console.log(_dictionary);
  }
}

然后我将这个添加到提供商：@NgModule({ providers: [ DictionaryService ]});

如您所见，服务使用 json 包含翻译的文件。

问题是服务的构造函数不起作用，所以我看不到消息：

console.log(_dictionary);

Answer 1

要阅读 JSON 文件，您应该使用 http get 并订阅它

import { HttpClient } from '@angular/common/http'; 
...
this.http.get("../assets/js/dictionary.json").subscribe(data => {
   console.log(data);
});

此致

Answer 2

您可以像这样导入 json 数据：

import * as _dictionary from "../assets/js/dictionary.json";

但是你不能在你的构造函数中注入它。您可以像这样将其包含在您的服务中：

export class DictionaryService {
  private dictionary = _dictionary;

  constructor() {}
}

旁注，对于翻译，有很棒的工具，例如 ngx-translate and transloco that load json files behind the scenes, and do it really well. I wrote an article explaining how to use them here。

您可能需要将 "resolveJsonModule": true 添加到 tsconfig.json 文件中的编译器选项。

如何读取 Json 文件并作为服务在任何地方使用？

How to read Json file and use in everywhere as service?

angular

angular5