Angular读取JSON文件的方法

  在Angular中,有时候咱们须要从一个文件中读取数据,如今说明下读取一个JSON文件的数据的步骤:json

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

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

2、将其放入assets之中:

3、注入Http依赖:

  constructor(private http: Http) { }

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

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

4、读取代码:

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

5、结果:

总结:

  一、必定要把data.json放入assets中,否则会报找不到文件的错误,缘由是由于Angular的配置限定了资源文件的所在地。咱们能够打开.angular-cli.json文件,看到了assets这个属性,能够发现资源文件中只规定了assets的路径,因此在其余文件夹的资源Angular在编译过程当中会忽略:spa

  二、固然,可能能够在assets中添加其余路径,我猜也是能够的,虽然我没尝试过。code

相关文章
相关标签/搜索