javascript - 如何将 .json 配置导入 environment.ts 并使用 Angular 使用 api？

Question

我想导入一个 Json 文件，该文件位于我具有以下网址的 Assets 文件夹中:

config.json:

{
    "url1": "https://jsonplaceholder.typicode.com/posts",
    
    "url2" : "https://reqres.in/api/users",
    
    "url3":"https://fakerestapi.azurewebsites.net/api/Authors"
}

因此，我不想对 URL 进行硬编码，而是想从 Json 文件导入，但我不确定该怎么做。

如有任何建议或场景，我们将不胜感激，以下是我的问题:

1. 如何将 Json 文件导入 environment.ts 并从那里获得一个使用 api 的服务

2. 如果我导入文件，prod 和 loc dev 也需要相同

我想要的:

我有一个配置文件，其中包含 .json 文件中的一些 URL 现在存储在 Assets 文件夹中，而不是加载 environments.prod 或 .ts，我想加载我的 Json 文件配置并基于它我想运行我的应用程序

我做了什么:

下面是我放在 Assets 文件夹中的 Json 文件

{
    "baseUrl": "https://jsonplaceholder.typicode.com/",
    "baseUrl2": "https://reqres.in/api/users"
}

ConfigServiceService.ts 用于存储配置文件

public _config: Object;

    constructor(public http:Http) { }
    
    getData(){
       debugger;
       return this.http.get("./assets/config.json").pipe(map(res =>  res.json()));
    }

在此之后，我创建了一个 ServiceProviderService.ts 用于调用服务文件

configData:any;


   constructor(public http:Http,public config:ConfigServiceService) {
    
   }
    
   jsonData(){
       debugger;
       return this.configData;
   }
    
   ngOnInit(){
      debugger;
      this.config.getData().subscribe(res =>{
         console.log(res);
         this.configData = res;
      });
    
    
   }

app.component.ts

 title = 'sample';
 constructor(public serv :ServiceProviderService){
      this.serv.jsonData();
 }

我无法获取 Json 数据，如果我将 ngOnInit 中的逻辑放入 ServiceProviderService.ts 文件中(如果我将其放入构造函数中)，那么我将无法定义。

注意:这里如果有多个 url，那么每个 url 都会分发到各种单独的服务文件，假设 1 个服务文件的 base1 url 和另一个文件的 base2 url 我该如何实现

https://stackblitz.com/edit/read-local-json-file-5zashx

在 app.component.ts 中我变得未定义

Answer 1

由于您在 JSON 文件中有静态字符串，它已经保存在/assets 文件夹中并且不在服务器上，因此您不需要使用 http.get。
我们使用 http 协议(protocol)仅从服务器/后端获取 JSON 文件中的数据，而不是从客户端文件夹获取数据。
您只需要在需要的地方导入 JSON 文件(甚至在 environment.ts 中)，就像您对 DTO 所做的那样。 使用 Typescript 的 ES6 import 语句结合 JSON 文件中的 export。

assets/config.ts

export const URLS = Object({

     "url1": "https://jsonplaceholder.typicode.com/posts",

     "url2" : "https://reqres.in/api/users",

     "url3":"https://fakerestapi.azurewebsites.net/api/Authors"
})

然后在任何地方(组件、指令、服务、类、接口(interface)等...)

import { URLS } from 'assets/config.ts';

....

this.url1 = URLS.url1;

//或

let url1 = URL.url1;

现在 this.url1 可以在 http.get 中的任何 api 调用中使用，例如:

 this.http.get(`${this.url1}`, { headers: this.getHeaders(token) });

或

 this.http.get(`${url1}`, { headers: this.getHeaders(token) }) // where url1 could be a variable or method parameter, etc...

就是这样