Angular에서 로컬 JSON 파일을 가져오는 방법에 대한 간략한 분석

이 글은 Angular에서 로컬 JSON 파일을 가져오는 방법을 소개합니다.

로컬 JSON 파일을 Angular로 가져오기

1. 첫 번째

Angular는 6.1+부터 Typescript2.9+를 지원합니다. Typescript의 새로운 기능을 사용하면 가져오기를 사용할 수 있습니다. 로컬 JSON 파일을 Typescript 모듈로 직접 가져옵니다. [권장 관련 튜토리얼: "import 在任何Typescript模块里直接导入本地的JSON文件。【相关教程推荐：《angular教程》】

要启用这个新特性，需要在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(&#39;assets/json/data.json&#39;).subscribe((res) => {
        this.jsonDataResult = res;
        console.log(&#39;--- result :: &#39;,  this.jsonDataResult);
      });
  }
}

3. 第三种

3.1 步骤一

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

src/assets/json/data.json

3.2 步骤二

在放置json文件的目录下创建一个 *.d.tsangular Tutorial

이 새로운 기능을 활성화하려면 Angular에서 다음 단계를 수행해야 합니다.
1.1 1단계

프로젝트 소스 코드 디렉토리의 아무 곳에나 JSON 파일을 생성합니다. 예:

src/assets/json/data.json

httpClient 导入JSON文件，代码如下：

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

注意事项 :
如果不生效，提示需要进一步配置resolveJsonModule的错误信息，则你需要检查项目里的 tsconfig.app.json1.2 2단계

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

• resolveJsonModule🎜은 .json 접미사 파일 가져오기를 허용합니다.
• 🎜esModuleInterop🎜은 기본적으로 내보내지지 않는 모듈 가져오기를 허용합니다. . .json용입니다. 파일이 필요합니다.

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

위 내용은 Angular에서 로컬 JSON 파일을 가져오는 방법에 대한 간략한 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!