이 글은 Angular에서 로컬 JSON 파일을 가져오는 방법을 소개합니다.
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 } }
其中:
.json
后缀文件.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
angular Tutorial
이 새로운 기능을 활성화하려면 Angular에서 다음 단계를 수행해야 합니다.
프로젝트 소스 코드 디렉토리의 아무 곳에나 JSON 파일을 생성합니다. 예:
1.1 1단계
src/assets/json/data.json
httpClient
导入JSON文件,代码如下:
declare module '*.json' { const value: any; export default value; }
注意事项 :
如果不生效,提示需要进一步配置resolveJsonModule的错误信息,则你需要检查项目里的 tsconfig.app.json
1.2 2단계
tsconfig.json
파일의compileOptions 옵션 아래에 다음 코드를 설정합니다. // 你的JSON文件路径 import * as data from '../../assets/json/data.json'; // 或者像这样导入也可以 import data from '../../assets/json/data.json';그 중:
.json
접미사 파일 가져오기를 허용합니다..json용입니다.
파일이 필요합니다.{ ..., "include": [ "src/**/*.d.ts" ] }🎜🎜🎜2. 두 번째🎜 🎜🎜🎜Angular의 내장
httpCLient
서비스 사용🎜🎜🎜2.1 1단계🎜🎜🎜JSON 파일을 프로젝트 소스 코드 디렉토리 어디에나 생성합니다. 예: 🎜🎜🎜src/assets/json/data.json 🎜🎜🎜🎜2.2 2단계🎜🎜🎜app.module.ts 파일에서 httpClientModule
모듈을 가져옵니다. 코드는 다음과 같습니다. 🎜rrreee🎜🎜2.3 3단계🎜🎜🎜command/command/service httpClient
에서 사용하세요. JSON 파일을 가져오세요. 코드는 다음과 같습니다. 🎜rrreee🎜🎜🎜3. 🎜🎜🎜🎜🎜3.1 1단계🎜🎜🎜프로젝트 소스 코드 디렉터리의 아무 곳에나 JSON 파일을 생성합니다. 예: 🎜 🎜🎜src/assets/json/data.json🎜🎜🎜🎜3.2 2단계🎜🎜🎜 *.d.ts
파일을 json 파일이 있는 디렉터리에 저장합니다. 예: 🎜🎜🎜 src/assets/json 폴더에 data-typings.d.ts를 생성합니다🎜🎜Note🎜 :
전역적으로 선언할 수 있도록 이 파일을 src 루트 디렉터리에 생성할 수 있습니다. 또한 파일 이름은 임의적이지만 접미사는 🎜.d.ts🎜🎜🎜rrreee🎜🎜3.3이어야 합니다. 3단계🎜🎜🎜 Component/에서 명령/서비스에서 httpClient
를 사용하여 JSON 파일을 가져옵니다. 코드는 다음과 같습니다. 🎜rrreee🎜🎜참고:🎜 🎜적용되지 않고 추가로 오류 메시지가 표시됩니다. ResolveJsonModule 구성이 필요합니다. tsconfig.app.json 구성 파일을 확인해야 합니다. 다음 옵션이 있습니다. 포함, 구성에서 * 🎜.d.ts🎜 경로를 확인하세요. 예: 🎜rrreee🎜더 많은 프로그래밍 관련 지식을 보려면 🎜프로그래밍 비디오 🎜를 방문하세요! ! 🎜위 내용은 Angular에서 로컬 JSON 파일을 가져오는 방법에 대한 간략한 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!