Angular 5 Service读取本地.json文件

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Angular 5 Service读取本地.json文件相关的知识,希望对你有一定的参考价值。

我正在使用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));

  }

}

我怎么能完成这个?

答案

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

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<any> {
        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);
        });
   }
}
另一答案

您有另一种解决方案,直接导入您的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)
另一答案

在寻找真正读取本地文件而不是从Web服务器读取文件的方法时,我发现了这个问题,我宁愿称之为“远程文件”。

只需致电require

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

Angular-CLI源代码激发了我的灵感:我发现它们包含组件模板,方法是用templateUrl替换template属性,用require调用实际HTML资源。

如果使用AOT编译器,则必须通过调整qazxsw poi来添加节点类型定义:

tsconfig.app.json
另一答案
"compilerOptions": {
  "types": ["node"],
  ...
},
...

有关import data from './data.json'; export class AppComponent { json:any = data; } 的信息,请参阅此文章。

另一答案

对于Angular 7,我按照以下步骤直接导入json数据:

在tsconfig.app.json中:

more details添加"resolveJsonModule": true

在服务或组件中:

"compilerOptions"

然后

import * as exampleData from '../example.json';
另一答案

试试这个

在您的服务中编写代码

private example = exampleData;

导入json文件

import {Observable, of} from 'rxjs';

在组件中

import Product  from "./database/product.json";

getProduct(): Observable<any> {
   return of(Product).pipe(delay(1000));
}

以上是关于Angular 5 Service读取本地.json文件的主要内容,如果未能解决你的问题,请参考以下文章

通过 Angular 5 读取/下载 JSON 文件并将数据存储在本地 JSON 文件中

Angular Service HttpClient API 在生产中请求 404,但不是在本地

Service Fabic - 无法在 Windows 上本地运行 Angular:EPERM:不允许操作

Angular 10.2 构建:本地化包生成失败:无法读取未定义的属性“值”

Angular 2 Service 返回对象对象

生产构建中的 Angular 问题,但在本地开发中没有。错误类型错误:无法读取未定义的属性“调用”