Question

在目录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个文件放在主root/src/assets/i18n目录中，但对于我们的项目，我们需要将翻译文件放在与组件相同的目录中。

如果我在.angular-cli.json文件中执行此操作：

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

（即在资产数组中添加＆＃34; app＆＃34;） ...然后我可以访问每个组件目录中的.json个文件。但我们并不想以这种方式公开app。

当我运行ng serve并转到devTools并查看＆＃34; Sources＆＃34;时，我可以在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文件。

如何在运行.json时将ng serve文件包含在这些目录中？

Answer 1

您需要使用http调用请求.json文件。要请求服务器资源，请更好地创建新服务以读取文件。然后将数据作为observable返回，并在您的demo-parent component中注册。

<强>服务

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));

     }
}

<强>组件

 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 4项目的构建中包含.json文件？

1 个答案: