• 技术文章 >web前端 >js教程

    浅谈Angular中导入本地JSON文件的方法

    青灯夜游青灯夜游2021-05-12 10:32:43转载611
    本篇文章给大家介绍一下如何在Angular中导入本地JSON文件。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

    1. 第一种

    Angular从6.1+开始支持Typescript2.9+,借助Typescript的新特性,我们可以通过使用 import 在任何Typescript模块里直接导入本地的JSON文件。【相关推荐:《angular教程》】

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

    1.1 步骤一

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

    src/assets/json/data.json

    1.2 步骤二

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

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

    其中:

    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"
      ]
    }

    更多编程相关知识,请访问:编程视频!!

    以上就是浅谈Angular中导入本地JSON文件的方法的详细内容,更多请关注php中文网其它相关文章!

    声明:本文转载于:掘金社区,如有侵犯,请联系admin@php.cn删除
    专题推荐:Angular JSON文件
    上一篇:js怎么改变css display属性的值 下一篇:详解nodejs在控制台打印高亮代码的方法
    线上培训班

    相关文章推荐

    • 深入了解Angular中的表单• 详解Angular使用ControlValueAccessor实现自定义表单控件• 详解Angular中自定义创建指令的方法• 2021年值得尝试的7个Angular前端组件库,快来收藏吧!• 详解Angular中的模板输入变量(let-变量)• 详解Angular中的组件交互

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网