Angular中如何导入本地的JSON文件实现数据交互？

本文共计1165个文字，预计阅读时间需要5分钟。

本篇文章介绍如何在Angular中导入本地JSON文件，希望对大家有所帮助。

Angular中导入本地JSON文件

1. 从Angular 6.1版本开始，Angular支持Typescript 2.9，借助Typescript的新特性，我们可以轻松地完成这项任务。

我们可以通过以下步骤来导入本地JSON文件：

1. 在Angular项目中，创建一个新的模块，例如`jsonModule.ts`。

2. 在模块中，导入所需的库，例如`import { NgModule } from '@angular/core';`。

3. 定义一个服务来加载JSON文件，例如`import { Injectable } from '@angular/core';`。

4. 在服务中，使用`JsonParser`类来解析JSON文件。

以下是一个示例代码：

typescriptimport { Injectable } from '@angular/core';import { JsonParser } from '@angular/core';import { Observable, of } from 'rxjs';import { catchError } from 'rxjs/operators';

@Injectable({ providedIn: 'root'})export class JsonService { constructor(private jsonParser: JsonParser) { }

loadJson(file: string): Observable { return new Observable(observer=> { this.getJson(file).subscribe( data=> { observer.next(data); observer.complete(); }, err=> { observer.error(err); } ); }).pipe( catchError(err=> of({ error: 'Failed to load JSON' })) ); }

getJson(file: string): Observable { return new Promise(resolve=> { fetch(file) .then(response=> response.text()) .then(data=> resolve(this.jsonParser.parse(data))) .catch(err=> { throw err; }); }); }}

5. 在模块中，导出服务。

typescriptimport { NgModule } from '@angular/core';import { JsonService } from './json.service';

@NgModule({ declarations: [], imports: [], providers: [JsonService], bootstrap: []})export class JsonModule { }

现在，你可以在Angular组件中使用这个服务来加载本地JSON文件了。

typescriptimport { Component } from '@angular/core';import { JsonService } from './json.service';

@Component({ selector: 'app-root', template: ` JSON Data {{ jsonData }} `})export class AppComponent { jsonData: any;

constructor(private jsonService: JsonService) { this.jsonService.loadJson('path/to/your/file.json').subscribe(data=> { this.jsonData=data; }); }}

以上就是在Angular中导入本地JSON文件的方法。希望这个示例能对大家有所帮助！

本篇文章给大家介绍一下Angular中导入本地JSON文件的方法，希望对大家有所帮助！

Angular中导入本地JSON文件

1. 第一种

Angular从6.1+开始支持Typescript2.9+，借助Typescript的新特性，我们可以通过使用 import 在任何Typescript模块里直接导入本地的JSON文件。

要启用这个新特性，需要在Angular中执行以下几个步骤：

1.1 步骤一

在项目源码目录下任意位置创建JSON文件，例如：

src/assets/json/data.json

1.2 步骤二

在 tsconfig.json 文件中的 compilerOptions 选项下设置如下代码：

{ ..., "compilerOptions": { ..., "resolveJsonModule": true, "esModuleInterop": true } }

其中：

• resolveJsonModule 允许导入 .json 后缀文件
• esModuleInterop 允许导入模块里没有默认导出的module，这个对于 .json 文件是必须的

1.3 步骤三

在组件/指令/服务中的导入JSON文件，代码如下：

// 你的JSON文件路径 import data from '../../assets/json/data.json';

2. 第二种

使用Angular内置的 httpCLient 服务

2.1 步骤一

在项目源码目录下任意位置创建JSON文件，例如：

src/assets/json/data.json

2.2 步骤二

在app.module.ts文件中导入 httpClientModule 模块，代码如下：

import { HttpClientModule } from '@angular/common/http'; @NgModule({ imports: [..., HttpClientModule] }) export class AppModule {}

2.3 步骤三

在组件/指令/服务中使用 httpClient 导入JSON文件，代码如下：

import { Component } from '@angular/core'; import { HttpClient } from '@angular/common/http'; @Component({ selector: 'app-second-way', template: `<div>{{jsonDataResult | json}}` }) export class SecondWayComponent { jsonDataResult: any; constructor(private http: HttpClient) { this.http.get('assets/json/data.json').subscribe((res) => { this.jsonDataResult = res; console.log('--- result :: ', this.jsonDataResult); }); } }

3. 第三种

3.1 步骤一

在项目源码目录下任意位置创建JSON文件，例如：

src/assets/json/data.json

3.2 步骤二

在放置json文件的目录下创建一个 *.d.ts 的文件，例如：

我们在 src/assets/json 文件夹下创建 data-typings.d.ts
注意： 你可以在src根目录下创建这个文件，这样的话可以全局被声明；另外文件名是任意的，但是后缀名必须是 .d.ts

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

3.3 步骤三

在组件/指令/服务中使用 httpClient 导入JSON文件，代码如下：

// 你的JSON文件路径 import * as data from '../../assets/json/data.json'; // 或者像这样导入也可以 import data from '../../assets/json/data.json';

注意事项 :
如果不生效，提示需要进一步配置resolveJsonModule的错误信息，则你需要检查项目里的 tsconfig.app.json 配置文件，其中有一选项：include，确保里边配置里* .d.ts 的路径，例如：

{ ..., "include": [ "src/**/*.d.ts" ] }

更多编程相关知识，请访问：编程视频！！