Angular4:如何访问本地json？

Question

在Angular2中,你可以在那里有一个文件夹/ data /和一个json文件,你可以在localhost:4200/data/something.json访问它.

Angular4中不再可能这样.

任何想法如何让它工作？

Answer 1

你可以使用这段代码

@Injectable()
export class AppServices{

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

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

     }
}

这file.json是你的本地json文件.

也见到这里

• 如何使用Http类在angular2中获取json文件

也看到了路径的角度cli的变化

• https://github.com/angular/angular-cli/blob/master/CHANGELOG.md#100-rc4-2017-03-20

Answer 2

当然可能.我们假设这是你的json文件

这是你调用json的代码

import { Injectable } from '@angular/core';
import { Http, Headers, Response } from '@angular/http';
import { Observable } from 'rxjs';
import 'rxjs/add/operator/map'

@Injectable()
export class YourService {

   constructor(private http: Http) { }

   getAdvantageData(){
      let apiUrl = './assets/data/api/advantage.json';
      return this.http.get(apiUrl)
      .map( (response: Response) => {
         const data = response.json();
         return data;
      });
   }  
}

Answer 3

我遇到了同样的问题,我的Observable Angular服务位于'src/app /'文件夹内,它正在尝试加载本地JSON文件.我试图将JSON文件放在同一个app文件夹中,在一个新的'api'文件夹中,使用各种亲戚/绝对路由,但它没有帮助,我得到404错误.我把它放在'assets'文件夹里的那一刻...... BAM!有效.我想还有更多......

可能是这个链接有帮助......

角点的成分相对路径

Answer 4

你也可以使用"require";

let test = require('./test.json');