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

javascript json angular

2022-08-30 04:56:24

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

  }

}

我怎样才能完成此操作？

答案 1

首先，您必须注入和不注入，第二件事您必须删除，您将不再需要它，因为默认情况下，new会为您提供响应的正文，最后请确保您导入您的：HttpClientHttpClientModule.map((res:any) => res.json())HttpClientHttpClientModuleAppModule

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

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

答案 2

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

在 tsconfig.app.json 中：

加入"resolveJsonModule": true"compilerOptions"

在服务或组件中：

import * as exampleData from '../example.json';

然后

private example = exampleData;