javascript - कोणीय 5 स्थानीय.json फ़ाइल को पढ़ने के लिए सेवा




angular (4)

मैं Angular 5 का उपयोग कर रहा हूं और मैंने कोणीय-cli का उपयोग करके एक सेवा बनाई है

मैं जो करना चाहता हूं वह एक ऐसी सेवा बनाना है जो कोणीय 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));

  }

}

मैं इसे कैसे पूरा कर सकता हूं?


आपके पास एक वैकल्पिक समाधान है, सीधे अपने जोंस का आयात करना।

संकलित करने के लिए, इस मॉड्यूल को अपनी टाइपिंग। Dot फ़ाइल में घोषित करें

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

अपने कोड में

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

console.log(data_json)

इसे इस्तेमाल करे

अपनी सेवा में कोड लिखें

import {Observable, of} from 'rxjs';

आयात json फ़ाइल

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

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

घटक में

get_products(){
    this.sharedService.getProduct().subscribe(res=>{
        console.log(res);
    })        
}

मुझे यह सवाल तब मिला जब मैं वेब सर्वर से एक फ़ाइल को पढ़ने के बजाय वास्तव में एक स्थानीय फ़ाइल पढ़ने का एक तरीका खोज रहा था, जिसे मैं "दूरस्थ फ़ाइल" कहूंगा।

बस कॉल की require :

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

कोणीय-सीएलआई स्रोत कोड ने मुझे प्रेरित किया: मुझे पता चला कि वे टेम्पलेट टेम्पलेट को टेम्पलेट द्वारा बदलते हैं और templateUrl द्वारा वास्तविक संपत्ति की require

यदि आप AOT कंपाइलर का उपयोग करते हैं तो आपको tsconfig.app.json को एडजस्ट करके नोड प्रकार के tsconfig.app.json को जोड़ना होगा:

"compilerOptions": {
  "types": ["node"],
  ...
},
...

सबसे पहले आपको HttpClient और Not HttpClientModule को इंजेक्ट करना होगा, दूसरी चीज जिसे आपको हटाने के लिए है। डिफ़ॉल्ट रूप से प्रतिक्रिया, अंत में सुनिश्चित करें कि आप अपने 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<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);
        });
   }
}




angular