Angular 2 - 所有组件的全局变量

Question

我的 angular2 应用程序在许多不同的组件中使用我的后端 laravel API。 我一直在想，将来我需要更改API URL。这意味着我将不得不在所有地方(在所有组件中)更改我的 API URL 我已经对我的 API 使用了 http get/post 方法。

现在.. 实现一个变量来存储 API URL 并在我的所有组件中使用它的正确方法是什么？

1. 仅用于设置获取 API URL 的服务
2. 我的每个 API 对象都有一个不同的服务，例如 userAPI.service 与用户相关的 API 调用，peopleAPI.service 与人相关的 API 调用，gameAPI.service 与游戏相关的 API 调用等。
3. 还有什么我还不知道的不同之处吗？

Answer 1

您可以通过扩展 BaseRequestOptions 类来为此提供您自己的请求选项。这样，您的 Web API 的基础 URL 将在一个地方定义:

import {BaseRequestOptions, RequestOptions, RequestOptionsArgs} from 'angular2/http';

export class CustomRequestOptions extends BaseRequestOptions {

  merge(options?:RequestOptionsArgs):RequestOptions {
    options.url = 'http://10.7.18.21:8080/api' + options.url;
    return super.merge(options);
  }

}

在使用 Http 对象的类中，您现在只需要使用路径而不是整个 URL。这是一个示例:

this.http.get('/someresource')...

然后您需要在引导您的应用程序时注册它。

bootstrap(AppComponent, [
  HTTP_PROVIDERS,
  provide(RequestOptions, {useClass: CustomRequestOptions})
]);

有关详细信息，请参阅此链接:

• http://restlet.com/blog/2016/04/12/interacting-efficiently-with-a-restful-service-with-angular2-and-rxjs-part-2/