javascript - Angular4: 로컬 json에 어떻게 액세스합니까?



(5)

Angular2에서는 폴더 / data /와 json 파일을 가질 수 있으며 localhost : 4200 / data / something.json에서 액세스 할 수 있습니다.

이것은 Angular4에서는 더 이상 가능하지 않습니다.

어떤 이상이 작동하도록하는 방법?

https://ffff65535.com


"require"도 사용할 수 있습니다.

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

Observable Angular 서비스가 'src / app /'폴더 내부에 있고 로컬 JSON 파일을로드하려고 할 때 동일한 문제가 발생했습니다. JSON 파일을 새로운 'api'폴더 안에있는 동일한 앱 폴더 안에 넣으려고했지만 다양한 친척 / 절대 경로를 사용했지만 도움이되지 않았기 때문에 404 오류가 발생했습니다. 내가 그것을 'assets'폴더에 넣는 순간 ... BAM !!! 그것은 효과가 있었다. 나는 그것에 더 많은 것이 있다고 생각합니다 ...

이 링크가 도움이 될 수 있습니다 ...

육안으로 보았을 때의 구성 요소 친화적 인 팻치


나는 그것을 알아.

Angular2에서는 src 폴더 아래에 폴더가 있습니다. Angular4에서는 루트 폴더에 있어야합니다.

예:

각도 2 :

root / src / data / file.json

각도 4 :

root / data / file.json


물론 가능합니다. 여기에 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;
      });
   }  
}

이 코드를 사용할 수 있습니다.

@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의 changlog도 참조하십시오.





angular