Question

我想要的：我有一个配置文件，其中现在包含存储在资产文件夹中的.json文件中的一些URL，而不是加载environment.prod或.ts，我想加载我的json文件配置并以此为基础运行我的应用程序

我做了什么

 below is my json file    which i placed  asset folder

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

现在我创建了一个 ConfigServiceService.ts fpr存储配置文件

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都会分发到各个单独的服务文件中，假设1个服务文件的base1 url和另一个文件的base2 url，我该如何实现

Answer 1

访问资产文件夹。确保angular.json在

下具有引用

architect-> build-> options到文件存储目录：

 "assets": [
              "src/favicon.ico",
              "src/assets"
            ],

Answer 2

在Angular中，只有组件具有生命周期挂钩（例如ngOnInit，ngOnDestroy等），服务则没有。在服务中，应改用其构造函数。

Answer 3

尝试给它提供一个绝对的URL，它应该可以工作

在这里，尝试一下：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable()
export class ConfigService {

  constructor(private http: HttpClient) { }

  getData() {
    return this.http.get('/assets/config.json');
  }

}

这是您推荐的Working Sample StackBlitz。

无法使用angular从资产文件夹中检索json数据

3 个答案: