[英]unable to retrieve json data from assets folder using angular
what i want : i have a config file where it contains some urls in .json file stored in asset folder now instead of loading environments.prod or .ts i want to load my json file config and basing on that i want run my application 我想要的是 :我有一个配置文件,其中现在包含存储在资产文件夹中的.json文件中的一些url,而不是加载environment.prod或.ts,我想加载我的json文件配置并基于我要运行我的应用程序
what i did 我做了什么
below is my json file which i placed asset folder
{
"baseUrl": "https://jsonplaceholder.typicode.com/",
"baseUrl2": "https://reqres.in/api/users"
}
now i created a ConfigServiceService.ts fpr storing config file 现在我创建了一个ConfigServiceService.ts fpr存储配置文件
public _config: Object;
constructor(public http:Http) { }
getData(){
debugger;
return this.http.get("./assets/config.json").pipe(map(res => res.json()));
}
after this i create a ServiceProviderService.ts for calling the service file 之后,我创建一个ServiceProviderService.ts来调用服务文件
configData:any; 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;
});
}
now i am calling the app.component.ts
现在我正在打电话给
app.component.ts
title = 'sample';
constructor(public serv :ServiceProviderService){
this.serv.jsonData();
}
now my issue is i am not able to get the json data and if i am putting the logic which is there is ngoninit in ServiceProviderService.ts file if put it in constructor then i am getting undefined 现在我的问题是我无法获取json数据,如果我将逻辑放在ServiceProviderService.ts文件中,如果将它放在构造函数中,那么我将无法定义
note : here if there are more that once url then each url is distributed to various seperate service file suppose base1 url for 1 service file ans base2 url for another file how can i achieve that 注意:如果这里有多个URL,那么每个URL就会分发到各个单独的服务文件中,假设1个服务文件的base1 url和另一个文件的base2 url,我该如何实现
To access the assets folder. 访问资产文件夹。 Make sure
angular.json
has a reference under 确保
angular.json
在angular.json
有一个引用
architect
--> build
--> options
to the directory where the file is stored: architect
> build
>文件存储目录的options
:
"assets": [
"src/favicon.ico",
"src/assets"
],
In Angular only components have lifecycle hooks (like ngOnInit
, ngOnDestroy
etc), services haven't. 在Angular中,只有组件具有生命周期挂钩(例如
ngOnInit
, ngOnDestroy
等),服务则没有。 In services you should use their constructor instead. 在服务中,应改用其构造函数。
Try giving it an absolute url and it should work 尝试给它一个绝对的URL,它应该工作
Here, give this a try: 在这里,尝试一下:
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');
}
}
Here's a Working Sample StackBlitz for your ref. 这是供您参考的工作样本StackBlitz 。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.