Question

我试图将角度6中的url和proerties外部化。

有一项服务，可以调用第三方网址来获取数据。

weather-component.html - ＆gt; weather.component.ts - ＆gt; weather.service.ts

在我的weather.service.ts，

public getWeather() {
     // Here I have hardoded the URL and the api key.   
}

我想将其外化，以使其可配置。

不确定如何将其移动到可配置文件并从那里读取。

Answer 1

我想你想要制作通用服务

您可以拥有baseHttp.service.ts，weather.service.ts会扩展baseHttpservice以进行api调用。

baseHttp.service.ts

@Injectable()
export abstract class BaseHttpService {
    private baseUrl: string = Constants.BASEURL;
    protected method: string;
    protected serviceUrl: string;
    protected headers: Headers;

    constructor(private http: Http) {
        this.headers = new Headers();
        this.headers.append('Content-Type', 'application/json');
        this.headers.append('Accept', 'application/json');
    }

    call(params: any) {

        let url: string = this.setUrl();

        let options = new RequestOptions({ headers: this.headers });
        options.url = url;
        options.method = this.method;
        options.body = params;
        return this.http.request(url, options).toPromise()
            .then((response: any) => this.extractData(response))
            .catch((error: any) => this.handleError(error));
    }
    //complete the other functions
}

weather.service.ts

@Injectable()
export class DashboardService extends BaseHttpService {
    constructor(private _http: Http) {
        super(_http);
    }

    getWeatherReport(params:any) {
        this.serviceUrl = 'some-url';
        this.method = "GET";
        return super.call(params);
    }
}

所以你可以注入weather.service.ts并覆盖weather.service.ts中的值并进行http调用

所以baseHttp.service.ts充当拦截器，所以你可以拦截那里的所有Http调用。

Answer 2

完全相同的manish回答但是当我们在Angular 2中启动项目时，这个博客非常有用。通过http网关的升级已大规模改变，当角度改变了4中的httpclient时它非常有用。

https://blog.sstorie.com/adapting-ben-nadels-apigateway-to-pure-typescript

另外如果您正在寻找放置基本网址等的地方，我会在angular-cli中使用环境ts文件 https://github.com/angular/angular-cli/wiki/stories-application-environments

Angular 6 - 外部化网址

2 个答案: