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

이 글에서는Angular에서 로컬 JSON 파일을 가져오는 방법을 소개합니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.

1. 첫 번째

Angular는 6.1 이상부터 Typescript2.9+를 지원합니다. Typescript의새로운 기능을 사용하면 모든 Typescript 모듈에서import를 사용할 수 있습니다. 로컬 JSON을 직접 가져올 수 있습니다. 파일. [관련 권장 사항: "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: `
{{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.tsangular Tutorial

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

1.1 1단계In 프로젝트 소스 코드 디렉터리 어디에든 JSON 파일을 생성합니다. 예:

src/assets/json/data.json

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

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

注意事项 :
如果不生效，提示需要进一步配置resolveJsonModule的错误信息，则你需要检查项目里的tsconfig.app.jsoncode>tsconfig .json파일의compileOptions 옵션 아래에 다음 코드를 설정합니다:

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

• resolveJsonModule은.json가져오기를 허용합니다. 접미사 파일

• esModuleInterop을 사용하면 기본적으로 내보내지 않는 모듈을 가져올 수 있습니다. 이는.json파일에 필요합니다.

1.3 3단계 command/command/service에서 JSON 파일을 가져옵니다. 코드는 다음과 같습니다.

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

로그인 후 복사

2. Angular에 내장된httpCLientService

2.1을 사용합니다. 1단계JSON 파일을 프로젝트 소스 코드 디렉토리 어디에나 생성합니다. 예: src/assets/json/data .json

2.2 2단계앱에서httpClientModule모듈을 가져옵니다. module.ts 파일의 코드는 다음과 같습니다. rrreee

2.3 3단계가져올 구성요소/명령/서비스에서httpClient를 사용하세요. 코드는 다음과 같습니다. rrreee

3. 세 번째 유형

3.1 1단계 프로젝트 소스 코드 디렉터리의 아무 곳에나 JSON 파일을 생성합니다. 예: src/assets/ json/data.json

3.2 2단계만들기 json 파일이 있는 디렉터리에*.d.ts파일 예: 우리는 src/assets/json 폴더에 data-typings.d.ts를 생성합니다 : 전역적으로 선언할 수 있도록 이 파일을 src 루트 디렉터리에 생성할 수 있습니다. 또한 파일 이름은 임의적이지만 접미사는 .d.tsrrreee3.3이어야 합니다. 3단계 Component/에서 명령/서비스에서httpClient를 사용하여 JSON 파일을 가져옵니다. 코드는 다음과 같습니다. rrreee참고: 적용되지 않고 추가로 오류 메시지가 표시됩니다. ResolveJsonModule 구성이 필요합니다. tsconfig.app.json 구성 파일을 확인해야 합니다. 다음 옵션이 있습니다. 포함, 구성에서 * .d.ts 경로를 확인하세요. 예: rrreee더 많은 프로그래밍 관련 지식을 보려면 프로그래밍 비디오 를 방문하세요! !

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