Angular 2+与所有http服务共享json配置值 [英] Angular 2+ share json config values with all http services

问题描述

我有一个角度服务，它读取一个包含rest fqdn和rest端口的json文件({"restFqdn":"kuno.dev.net"，"restPort":"58085"}).我想与所有其他http服务共享fqdn和port，这些服务从后端Rest服务器获取json数据.从json文件读取后，fqdn和port是静态的，但是json文件可以包含用于特定部署的不同值.

I have an angular service which reads a json file containing a rest fqdn and rest port ({ "restFqdn":"kuno.dev.net", "restPort":"58085" }). I want share the fqdn and port with all other http services, which get json data from a backend rest server. The fqdn and port are static after being read from the json file, but the json file can contain different values for a particular deployment.

@Injectable()
export class FileService {

    private result: Object;
    private restFqdn = '';
    private restPort = '';

    constructor(private http:Http) {

        this.result = this.getConfFile();
        console.log('FileService - constructor: ', this.result)
        this.setFqdn(this.result[0]);
        this.setPort(this.result[1]);

    }

    getConfFile() {
        return this.http.get('json/conf.json')
            .map( (res:Response) => {
                    this.result = res.json();
                    console.log('FileService - getConfFile(): ', this.result)
                    return this.result;
                }
            )
            .catch( error =>
                Observable.throw(error || 'Server error')
            );
    };

    setFqdn(value) {
        this.restFqdn = value;
        console.log('FileService - setFqdn(): ', this.restFqdn);
    }

    getFqdn() {
        return this.restFqdn;
    }

我不确定如何与我的服务共享fqdn和端口.我真的不认为这是状态信息，但是我是否尝试使用诸如ngrx/store之类的外部库来执行此操作，还是有其他可行的方法?这是我当前在RateService.ts中拥有的内容:

I am not sure how to share the fqdn and port with my services. I don't really think this is state information, but do I try and use an external library like ngrx/store to do this or is there some other approach that works? This is what I currently have in my RateService.ts:

    constructor(private _http: HttpClient, private _fileService: FileService) {

    this._fileService.getConfFile().subscribe (
      data => {
        this.restFqdn = data.restFqdn;
        this.restPort = data.restPort;
        this.rateApi = '/kuno/rate';
        this.rateUrl = 'http://' + this.restFqdn + ':' + this.restPort + this.rateApi;
        console.log('RateService - constructor() - restFqdn: ', this.restFqdn);
        console.log('RateService - constructor() - restPort: ', this.restPort);
      },
      err => {
        this.errorMessage = 'Error - getConfFile failed!';
      }
    );
  }

构造函数从json文件中为rest fqdn和rest端口输出正确的值.但是，当我执行getRates调用时，未定义fqdn和port.我该怎么做才能将值传播到getRates()?

The constructor prints out the correct values from the json file for rest fqdn and rest port. However, when I execute my getRates call, the fqdn and port are undefined. What do I need to do to get the values propagated to getRates()?

 getRates(): Observable<any> {

    console.log('RateService - getRates() - getFqdn(): ', this._fileService.getFqdn()); // prints undefined

    return this._http.get(this.rateUrl)
           .do(data => {

                          console.log('RateService: getRates(): ' + JSON.stringify(data))
                       })
           .catch(this.handleError);
 }

非常感谢！

推荐答案

我怀疑以下情况:

this.setFqdn(this.result[0]);
this.setPort(this.result[1]);

它的作用是从响应数组中获取第0个和第1个元素并进行设置，但是看到config.json文件时，请求的格式为:

What it does is gets the 0th and 1st element from the array of response and sets it, but seeing at you config.json file, the request is in this format:

{ "restFqdn":"kuno.dev.net", "restPort":"58085" }

不是数组.为什么在以下步骤中需要构造函数来调用config.json文件:

Which isn`t an array.Also why do you need a constructor to make the Call to your config.json file, when you are doing the same in :

this._fileService.getConfFile().subscribe (
  data => {

您需要执行的所有操作如下:

All you need to do is following:

创建一个简单的类，该类与您的配置请求进行映射，如下所示(不是强制性的，但这是读取配置文件的更简洁的方法):

Create a simple class, which maps with your config request as below (Not compulsory, but it is a cleaner way to read a Config File):

export class ConfigProp {
 restFqdn: string;
 restPort: string;
}

在您的FileService类中，尝试以下更改:

In your FileService class try with following changes:

@Injectable()
export class FileService {
    result: ConfigProp;
    constructor(private http:Http) {
        }

        getConfFile() {
            return this.http.get('json/conf.json')
                .map( (res:Response) => {
                        this.result = res.json();
                        console.log('FileService - getConfFile(): ', this.result)
                        return this.result;
                    }
                )
                .catch( error =>
                    Observable.throw(error || 'Server error')
                );
        };
}

休息其他一切似乎都很好.

Rest Everything else seems fine.

还有一个建议.由于配置文件是不同服务之间的共享文件.您可能需要将其保存在资产文件夹中，因为该文件夹旨在包含共享的可配置资源.

Also a word of advice. Since the config file is a shared file among different services. You might need to keep it in assets folder, as the folder is meant to contain shared, configurable resources.

这篇关于Angular 2+与所有http服务共享json配置值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！