Question

我的angular2应用程序在许多不同的组件中使用我的后端laravel API。我一直在想，将来我需要更改API网址。这意味着我必须在任何地方（在所有组件中）更改我的API URL我已经将http get / post方法用于我的API。

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

仅设置获取API网址的服务
我的每个API对象都有一个不同的服务，例如带有用户相关API调用的userAPI.service，用于人们重新发送的API调用的peopleAPI.service，用于游戏相关API调用的gameAPI.service等。
我还不知道的任何不同之处？

Answer 1

您可以通过扩展public List < Leagues > getAllLeagues() { List < Leagues > labels = new ArrayList < Leagues > (); // Select All Query String selectQuery = "SELECT * FROM " + LEAGUES_TABLE; SQLiteDatabase db = this.getReadableDatabase(); Cursor cursor = db.rawQuery(selectQuery, null); // looping through all rows and adding to list if (cursor.moveToFirst()) { do { labels.add(new Leagues(cursor.getInt(0), cursor.getString(1))); } while (cursor.moveToNext()); } // closing connection cursor.close(); db.close(); // returning labels return labels; }课程为此提供自己的请求选项。这样，您的Web API的基本URL将在一个位置定义：

BaseRequestOptions

在使用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); } }对象的类中，您现在只需要使用路径而不是整个URL。这是一个示例：

Http

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

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

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

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

Answer 2

Bit与extends混淆，并且所有答案都由@thierry提供，您可以使用一个公共类/服务，您可以在其中存储所有全局变量，并在引导时注入该类，这样做class现在可供整个应用程序中的所有其他类/组件使用，现在您只需在一个地方更改而不是在所有组件中进行更改就可以轻松更改变量值，这是相同的示例 -

import {Component, Injecable} from 'angular2/core';
import {Http, Response, RequestOptions, Headers, Request, RequestMethod} from 'angular2/http';

@Injecable()
export class GlobalService {
public base_path: string;

public headers: Headers;
public requestoptions: RequestOptions;
public res: Response;

constructor(public http: Http, public router: Router) {
    this.base_path = "http://128.199.190.109/api/";
}

public getRequsetOptions(url: string): RequestOptions {

        this.headers = new Headers();
        this.headers.append("Content-type", "application/json");
        this.headers.append("Authorization", 'Bearer ' + localStorage.getItem('id_token'));

    this.requestoptions = new RequestOptions({
        method: RequestMethod.Get,
        url: url,
        headers: this.headers
    });

    return this.requestoptions;
 }
}

并在bootstrap中注册此服务类，如下所示 -

bootstrap(AppComponent, [
  HTTP_PROVIDERS,GlobalService , XYZ...
]);

现在这个GlobalService类可用于所有其他类，

现在也无需在每次使用时在提供程序列表中注册此类，因为angular本身会将其初始化为所有组件，现在在这样的任何类中使用这些全局变量/函数 -

import {GlobalService} from './GlobalService';
import {Http} from 'angular2/http';

@Injectable()
export class ABC {
    constructor(private base_path_service: GlobalService, private http: Http) {}

    SomeMethod(url) {
        return this.http.request(new Request(this.base_path_service.getRequsetOptions(url)))
            .map(res=> {
                // DO your code
            });
    }

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

2 个答案: