读取本地.json文件的Angular 5服务

我使用的是Angular 5，我使用Angular-cli创建了一个服务。

我想做的是创建一个服务，为Angular 5读取一个本地json文件。

这就是我所拥有的...我有点卡住了......

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

@Injectable()
export class AppSettingsService {

  constructor(private http: HttpClientModule) {
    var obj;
    this.getJSON().subscribe(data => obj=data, error => console.log(error));
  }

  public getJSON(): Observable<any> {
    return this.http.get("./assets/mydata.json")
      .map((res:any) => res.json())
      .catch((error:any) => console.log(error));

  }

}

我怎样才能完成这个任务？

dhilt
已编辑的问题 28日 十二月 2017 в 11:38
编程
javascript json angular
9日 十一月 2017 в 4:28
1个视图
解决办法

首先你必须注入HttpClient而不是HttpClientModule。 其次，你必须删除.map((res:any) => res.json())，你将不再需要它，因为新的HttpClient会默认给你响应的主体，最后确保你在AppModule中导入HttpClientModule。 :

import { HttpClient } from '@angular/common/http'; 
import { Observable } from 'rxjs/Observable';

@Injectable()
export class AppSettingsService {

   constructor(private http: HttpClient) {
        this.getJSON().subscribe(data => {
            console.log(data);
        });
    }

    public getJSON(): Observable {
        return this.http.get("./assets/mydata.json");
    }
}

来将其添加到你的组件中。

@Component({
    selector: 'mycmp',
    templateUrl: 'my.component.html',
    styleUrls: ['my.component.css']
})
export class MyComponent implements OnInit {
    constructor(
        private appSettingsService : AppSettingsService 
    ) { }

   ngOnInit(){
       this.appSettingsService.getJSON().subscribe(data => {
            console.log(data);
        });
   }
}
Powkachu
编辑本段答案15日 四月 2019 в 3:18
评论(5)

你有一个替代解决方案，直接导入你的json。

为了编译，在你的typings.d.ts文件中声明这个模块

declare module "*.json" {
    const value: any;
    export default value;
}

在你的代码中

import { data_json } from '../../path_of_your.json';

console.log(data_json)
评论(8)

我在寻找一种真正读取本地文件的方法时发现了这个问题，而不是从网络服务器上读取文件，我宁愿把它称为"远程文件" 。

只要调用require就可以了。

const content = require('../../path_of_your.json');

Angular-CLI的源代码启发了我。我发现他们通过用template替换templateUrl属性，用require调用实际的HTML资源的值来包含组件模板。

如果你使用AOT编译器，你必须通过调整tsconfig.app.json来添加节点类型定义。

"compilerOptions": {
  "types": ["node"],
  ...
},
...
评论(1)