Dịch vụ Angular 5 để đọc tệp .json cục bộ

Question 1

Tôi đang sử dụng Angular 5 và tôi đã tạo một dịch vụ bằng cách sử dụng angle-cli

Những gì tôi muốn làm là tạo một dịch vụ đọc tệp json cục bộ cho Angular 5.

Đây là những gì tôi có ... Tôi hơi bế tắc ...

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

  }

}

Làm thế nào tôi có thể hoàn thành việc này?

Question 2

Đầu tiên Bạn phải tiêm HttpClientvà Không HttpClientModule, điều thứ hai bạn phải xóa, .map((res:any) => res.json())bạn sẽ không cần nó nữa vì cái mới HttpClientsẽ cung cấp cho bạn phần nội dung phản hồi theo mặc định, cuối cùng hãy đảm bảo rằng bạn nhập HttpClientModulevào 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");
    }
}

để thêm cái này vào Thành phần của bạn:

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

Question 3

Bạn có một giải pháp thay thế, nhập trực tiếp json của bạn.

Để biên dịch, hãy khai báo mô-đun này trong tệp typings.d.ts của bạn

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

Trong mã của bạn

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

console.log(data_json)

Question 4

Đối với Angular 7, tôi đã làm theo các bước sau để nhập trực tiếp dữ liệu json:

Trong tsconfig.app.json:

thêm "resolveJsonModule": truevào"compilerOptions"

Trong một dịch vụ hoặc thành phần:

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

Và sau đó

private example = exampleData;

Question 5

Tôi đã tìm thấy câu hỏi này khi tìm cách thực sự đọc tệp cục bộ thay vì đọc tệp từ máy chủ web, mà tôi muốn gọi là "tệp từ xa".

Chỉ cần gọi require:

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

Mã nguồn Angular-CLI đã truyền cảm hứng cho tôi: Tôi phát hiện ra rằng chúng bao gồm các mẫu thành phần bằng cách thay thế thuộc templateUrltính bằng templatevà giá trị bằng một requirelệnh gọi đến tài nguyên HTML thực tế.

Nếu bạn sử dụng trình biên dịch AOT, bạn phải thêm loại nút gỡ bỏ bằng cách điều chỉnh tsconfig.app.json:

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

Question 6

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

Xem bài viết này để biết thêm chi tiết .

Question 7

Thử cái này

Viết mã trong dịch vụ của bạn

import {Observable, of} from 'rxjs';

nhập tệp json

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

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

Trong thành phần

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

Question 8

Hãy tạo một tệp JSON, chúng tôi đặt tên cho nó là navbar.json, bạn có thể đặt tên nó bất cứ thứ gì bạn muốn!

navbar.json

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

Bây giờ chúng tôi đã tạo một tệp JSON với một số dữ liệu menu. Chúng tôi sẽ chuyển đến tệp thành phần ứng dụng và dán mã bên dưới.

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;

}

Bây giờ ứng dụng Angular 7 của bạn đã sẵn sàng để cung cấp dữ liệu từ tệp JSON cục bộ.

Truy cập app.component.html và dán mã sau vào đó.

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>

Question 9

Sử dụng Typescript 3.6.3 và Angular 6, không có giải pháp nào trong số này phù hợp với tôi.

Những gì đã làm là làm theo hướng dẫn ở đây nói rằng bạn cần thêm một tệp nhỏ có tênnjson-typings.d.ts vào dự án của mình, chứa cái này:

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

Sau khi điều này được thực hiện, tôi chỉ cần nhập dữ liệu json được mã hóa cứng của mình:

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

và sử dụng nó trong thành phần của tôi:

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

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