Javascript 如何获取内置Angular 4项目中包含的.json文件？

在目录

root/src/app/lsg/demo parent

中，我包含以下文件：

demo-parent.module.ts
demo-parent.component.ts
demo-parent.component.spec.ts
demo-parent.component.html
demo-parent.component.scss
demo-parent.routing.ts
en.json
fr.json

我需要在应用程序运行时访问

en.json

和

fr.json

中的内容。我使用的是第三方库，

ngx translate

，用于i18n/国际化

ngx translate

希望您将所有

[lang].json

文件放在主

根/src/assets/i18n

目录中，但对于我们的项目，我们需要翻译文件与组件位于同一目录中

如果我在

.angular cli.json

文件中执行此操作：

  "assets": [
    "assets",
    "favicon.ico",
    "app"
  ],

（即，将“应用程序”添加到资产数组） …然后我可以访问位于每个组件目录中的

.json

文件。但我们不想以这种方式公开

app

当我运行

ng serve

并转到devTools查看“Sources”时，我可以在

DemoParentModule

目录中看到以下生命：

DemoParentComponent.html
DemoParentComponent.ngfactory.js
DemoParentComponent.ngfactory.js? [sm]
DemoParentComponent_Host.html
DemoParentComponent_Host.ngfactory.js
DemoParentComponent_Host.ngfactory.js? [sm]
module.ngfactory.js
module.ngfactory.js? [sm]

我需要的一切都在那里…除了

.json

文件

---

当我运行

ng serve

时，如何获取要包含在这些目录中的

.json

文件？

您需要使用http调用请求

.json

文件。为了更好地请求服务器资源，请创建一个新的服务来读取文件。然后将数据返回为可观察的，并在演示父组件中注册

服务

import { Injectable } from '@angular/core';
import { Http} from '@angular/http';
import {Observable} from 'rxjs/Rx';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';

@Injectable()
export class DataServices{

    constructor(private http: Http) {
         var obj;
    }

    public getEN(): Observable<any> {
         return this.http.get("./en.json")
                         .map((res:any) => res.json())
                         .catch((error:any) => console.log(error));

     }

    public getFR(): Observable<any> {
         return this.http.get("./fr.json")
                         .map((res:any) => res.json())
                         .catch((error:any) => console.log(error));

     }
}

从'@angular/core'导入{Injectable}；
从'@angular/Http'导入{Http}；
从'rxjs/Rx'导入{Observable}；
导入'rxjs/add/operator/map'；
导入“rxjs/add/operator/catch”；
@可注射（）
导出类数据服务{
构造函数（专用http:http）{
var-obj；
}
public getEN（）：可观察{
返回此.http.get（“./en.json”）
.map（（res:any）=>res.json（））
.catch（（错误：any）=>console.log（错误））；
}
public getFR（）：可观察{
返回此.http.get（“./fr.json”）
.map（（res:any）=>res.json（））
.catch（（错误：any）=>console.log（错误））；
}
}

组件

 import {Component} from '@angular/core';
import {DataServices} from './data-services';

@Component({
    selector: 'app',
    template: `<*.htm>`
})
export class DemoParentComponent {

  constructor(private service DataServices) {
  }

  init() {
      let subscription = this.service.getFR.subscripe((data)=>{
          console.log(data); 
     });
  }

}

从'@angular/core'导入{Component}；
从“/data services”导入{DataServices}；
@组成部分({
选择器：“应用程序”，
模板：``
})
导出类DemoParentComponent{
构造函数（专用服务数据服务）{
}
init（）{
让订阅=this.service.getFR.subscribe（（数据）=>{
控制台日志（数据）；
});
}
}

您需要使用http调用请求

.json

文件。为了更好地请求服务器资源，请创建一个新的服务来读取文件。然后将数据返回为可观察的，并在演示父组件中注册

服务

import { Injectable } from '@angular/core';
import { Http} from '@angular/http';
import {Observable} from 'rxjs/Rx';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';

@Injectable()
export class DataServices{

    constructor(private http: Http) {
         var obj;
    }

    public getEN(): Observable<any> {
         return this.http.get("./en.json")
                         .map((res:any) => res.json())
                         .catch((error:any) => console.log(error));

     }

    public getFR(): Observable<any> {
         return this.http.get("./fr.json")
                         .map((res:any) => res.json())
                         .catch((error:any) => console.log(error));

     }
}

从'@angular/core'导入{Injectable}；
从'@angular/Http'导入{Http}；
从'rxjs/Rx'导入{Observable}；
导入'rxjs/add/operator/map'；
导入“rxjs/add/operator/catch”；
@可注射（）
导出类数据服务{
构造函数（专用http:http）{
var-obj；
}
public getEN（）：可观察{
返回此.http.get（“./en.json”）
.map（（res:any）=>res.json（））
.catch（（错误：any）=>console.log（错误））；
}
public getFR（）：可观察{
返回此.http.get（“./fr.json”）
.map（（res:any）=>res.json（））
.catch（（错误：any）=>console.log（错误））；
}
}

组件

 import {Component} from '@angular/core';
import {DataServices} from './data-services';

@Component({
    selector: 'app',
    template: `<*.htm>`
})
export class DemoParentComponent {

  constructor(private service DataServices) {
  }

  init() {
      let subscription = this.service.getFR.subscripe((data)=>{
          console.log(data); 
     });
  }

}

从'@angular/core'导入{Component}；
从“/data services”导入{DataServices}；
@组成部分({
选择器：“应用程序”，
模板：``
})
导出类DemoParentComponent{
构造函数（专用服务数据服务）{
}
init（）{
让订阅=this.service.getFR.subscribe（（数据）=>{
控制台日志（数据）；
});
}
}

我建议将文件移动到资产文件夹或备用文件夹，这样你就不必暴露你的

应用程序

文件夹。我们不想暴露应用程序文件夹，但我们也不想让所有文件都位于同一个位置。我们希望文件与组件本身共存。原因是这些组件中的一些最终将被添加到npm包中，并被其他项目使用。我建议将文件移动到assets文件夹或备用文件夹中，这样您就不必公开

应用程序

文件夹。我们不想公开应用程序文件夹，但是我们也不希望所有的文件都在一个地方。我们希望文件与组件本身共存。原因是，其中一些组件最终将被添加到npm包中，并被其他项目使用。在幕后，ngx translate已经在进行http调用。调用正在成功进行，但由于文件未包含在构建中，因此调用失败。在后台，ngx translate已经在进行http调用。调用正在成功进行，但由于构建中没有包含该文件，因此调用将失败。