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

Question

我想导入一个 Json 文件，该文件位于资产文件夹中，我的网址如下：

配置.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.dev如果我导入文件，prod和loc也需要相同

我想要什么：

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

我做了什么：

下面是我放在资产文件夹中的 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 数据，如果我将在 ServiceProviderService.ts 文件中存在 ngOnInit 的逻辑放入构造函数中，那么我将变得未定义。

注意：这里如果有多个 url，那么每个 url 被分发到各种单独的服务文件假设 base1 url 用于 1 个服务文件和 base2 url 用于另一个文件我怎么能做到这一点

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

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

标签： javascriptjsonangulartypescript

Answer 1

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

资产/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"
})

然后在任何地方（组件、指令、服务、类、接口等......）

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

....

this.url1 = URLS.url1;

//或者

let url1 = URL.url1;

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

 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...

就是这样