您现在的位置是: 首页 » 网页代码 » angular中json是怎么导入的
网页代码

angular中json是怎么导入的

网站优化小编二月 17, 2020 24人已围观

angular中json导入的方法:将json文件放入assets之中。然后注入Http依赖并在模块中引入HttpModule。就可以读取json文件了。

网站运营中栏目排名优化技巧

angular中json导入的方法如下:

一、首先有一个JSON文件,命名data.json:

{
    "姓名": "李白",    
    "姓别": "男",    
    "年龄": 18
}

二、将其放入assets之中:

网站运营中栏目排名优化技巧

三、注入Http依赖:

constructor(private http: Http) { }

为了使用这个依赖,要在模块中引入HttpModule,并且Imports进来:

import { HttpModule } from '@angular/http';
 imports: [
    ……
    HttpModule,
    ……
  ],

四、读取代码:

 this.http.get('assets/data.json')
      .map(data => data.json())
      .subscribe(data => {
        console.log(data);
      });

五、结果:

网站运营中栏目排名优化技巧

注意:

一定要把data.json放入assets中,不然会报找不到文件的错误,原因是因为Angular的配置限定了资源文件的所在地。我们可以打开.angular-cli.json文件,看到了assets这个属性,可以发现资源文件中只规定了assets的路径,所以在其他文件夹的资源Angular在编译过程中会忽略:

网站运营中栏目排名优化技巧

文章评论

    发表评论

    电子邮件地址不会被公开。

站点信息
  • 站点运行:336天
  • 网站程序:Wordpress
  • 主题模板:bvseo
  • 文章统计:4599 条
  • 文章评论:859 条
  • 微信公众号:扫描二维码,关注我们