时间戳

首页 > 解决方案 > 无法使用角度从资产文件夹中检索 json 数据

javascript - 无法使用角度从资产文件夹中检索 json 数据

问题描述

我想要什么：我有一个配置文件，其中包含存储在资产文件夹中的 .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来调用服务文件

配置数据：任何；

  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 我怎么能做到这一点

标签： javascriptangulartypescript

解决方案

尝试给它一个绝对网址，它应该可以工作

在这里，试一试：

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');
  }

}

这是您参考的工作示例 StackBlitz。

推荐阅读