角度2 - すべてのコンポーネントのグローバル変数

Question

angle2アプリはバックエンドのlaravel APIをさまざまなコンポーネントで使用していました。 私は将来、API URLを変更する必要があると考えてきました。これは、API URLをどこでも（すべてのコンポーネントで）変更する必要があることを意味します。私はAPIのget/postメソッドをAPIに使用しています。

今、API URLを格納してすべてのコンポーネントで使用するための1つの変数を実装する正しい方法は何ですか？

1. サービス
   だけのユーザーreleated API呼び出しで例のuserAPI.serviceのために、私のAPIオブジェクトのそれぞれについて
2. 一つの異なるサービスをAPIのURLを取得設定するには、peopleAPI.service人-releatd API呼び出しのため、ゲームAPI API呼び出しのためのゲームAPI。サービス
3. 私はまだ分かっていないものは何ですか？

Answer 1

BaseRequestOptionsクラスを拡張することで、独自のリクエストオプションを提供できます。このようにWeb APIのベースURLが一つの場所で定義されます：Httpオブジェクトを使用するクラスで

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を使用するようになりまし必要があります。ここにサンプルがあります：

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/

Answer 2

@thierryが提供する答えとして、あなたは1つの共通クラス/サービスを使用することができますビットextendsと混同し、すべてをすべてのグローバル変数を保存し、ブートストラップ時にそのクラスを注入することができます。これにより、クラスがアプリケーション全体の他のすべてのクラス/コンポーネントで利用できるようになりました。ルちょうど一箇所に変更はなく、ここではすべてのコンポーネントの変更を行うことにより値が同じの一例である -

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(AppComponent, [ 
    HTTP_PROVIDERS,GlobalService , XYZ... 
]); 

今、このGlobalServiceクラス

また、angleクラス自体がすべてのコンポーネントに対してこれを初期化するので、使用するたびにこのクラスをプロバイダのリストに登録する必要はありません。これらのグローバル変数/関数は、すべての別のクラスで使用します。このようなクラス -

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