Angular 5 บริการเพื่ออ่านไฟล์. json ในเครื่อง

ฉันใช้ Angular 5 และฉันได้สร้างบริการโดยใช้ angular-cli

สิ่งที่ฉันต้องการทำคือสร้างบริการที่อ่านไฟล์ json ในเครื่องสำหรับ Angular 5

นี่คือสิ่งที่ฉันมี ... ฉันติดขัดเล็กน้อย ...

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';

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

สำหรับ Angular 7 ฉันทำตามขั้นตอนเหล่านี้เพื่อนำเข้าข้อมูล json โดยตรง:

ใน tsconfig.app.json:

เพิ่ม"resolveJsonModule": trueใน"compilerOptions"

ในบริการหรือส่วนประกอบ:

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

แล้ว

private example = exampleData;

ฉันพบคำถามนี้เมื่อมองหาวิธีอ่านไฟล์ในเครื่องแทนที่จะอ่านไฟล์จากเว็บเซิร์ฟเวอร์ซึ่งฉันควรเรียกว่า "ไฟล์ระยะไกล"

เพียงโทรrequire:

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

ซอร์สโค้ด Angular-CLI เป็นแรงบันดาลใจให้ฉัน: ฉันพบว่ามีเทมเพลตคอมโพเนนต์โดยการแทนที่templateUrlคุณสมบัติด้วยtemplateและค่าด้วยการrequireเรียกทรัพยากร HTML จริง

หากคุณใช้คอมไพเลอร์ AOT คุณต้องเพิ่มนิยามประเภทโหนดโดยการปรับtsconfig.app.json:

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

import data  from './data.json';
export class AppComponent  {
    json:any = data;
}

ดูบทความนี้สำหรับรายละเอียดเพิ่มเติม

ลองสิ่งนี้

เขียนโค้ดในบริการของคุณ

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

มาสร้างไฟล์ JSON กันเราตั้งชื่อว่า navbar.json คุณสามารถตั้งชื่อได้ทุกอย่างที่คุณต้องการ!

navbar.json

[
  {
    "href": "#",
    "text": "Home",
    "icon": ""
  },
  {
    "href": "#",
    "text": "Bundles",
    "icon": "",
    "children": [
      {
        "href": "#national",
        "text": "National",
        "icon": "assets/images/national.svg"
      }
    ]
  }
]

ตอนนี้เราได้สร้างไฟล์ JSON พร้อมข้อมูลเมนูบางส่วน เราจะไปที่ไฟล์คอมโพเนนต์ของแอพและวางโค้ดด้านล่าง

app.component.ts

import { Component } from '@angular/core';
import menudata from './navbar.json';

@Component({
  selector: 'lm-navbar',
  templateUrl: './navbar.component.html'
})
export class NavbarComponent {
    mainmenu:any = menudata;

}

ตอนนี้แอป Angular 7 ของคุณพร้อมให้บริการข้อมูลจากไฟล์ JSON ในเครื่องแล้ว

ไปที่ app.component.html แล้ววางรหัสต่อไปนี้

app.component.html

<ul class="navbar-nav ml-auto">
                  <li class="nav-item" *ngFor="let menu of mainmenu">
                  <a class="nav-link" href="{{menu.href}}">{{menu.icon}} {{menu.text}}</a>
                  <ul class="sub_menu" *ngIf="menu.children && menu.children.length > 0"> 
                            <li *ngFor="let sub_menu of menu.children"><a class="nav-link" href="{{sub_menu.href}}"><img src="{{sub_menu.icon}}" class="nav-img" /> {{sub_menu.text}}</a></li> 
                        </ul>
                  </li>
                  </ul>

การใช้ typescript 3.6.3 และ Angular 6 วิธีแก้ปัญหาเหล่านี้ไม่ได้ผลสำหรับฉัน

สิ่งที่ทำได้คือทำตามบทช่วยสอนที่นี่ซึ่งบอกว่าคุณต้องเพิ่มไฟล์ขนาดเล็กที่เรียกว่าnjson-typings.d.tsโครงการของคุณซึ่งประกอบด้วยสิ่งนี้

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

เมื่อเสร็จแล้วฉันสามารถนำเข้าข้อมูล json ที่เข้ารหัสได้อย่างง่ายดาย:

import employeeData from '../../assets/employees.json';

และใช้ในส่วนประกอบของฉัน:

export class FetchDataComponent implements OnInit {
  public employees: Employee[];

  constructor() {
    //  Load the data from a hardcoded .json file
    this.employees = employeeData;
    . . . .
  }