कोणीय 2 - सभी घटकों के लिए वैश्विक चर

Question

मेरा कोणीय 2 ऐप कई अलग-अलग घटकों में मेरे बैकएंड लार्वेल एपीआई का उपभोग करता है। मैं सोच रहा हूं कि भविष्य में, मुझे एपीआई यूआरएल बदलना होगा। इसका मतलब है कि मुझे हर जगह अपना एपीआई यूआरएल बदलना होगा (सभी घटकों में) मैंने अपने एपीआई में http get/post method का उपयोग किया है।

अब .. एपीआई यूआरएल को स्टोर करने और इसे मेरे सभी घटकों में इस्तेमाल करने के लिए एक चर लागू करने का सही तरीका क्या होगा?

1. एक सेवा बस उपयोगकर्ता के releated एपीआई कॉल के साथ उदाहरण userAPI.service के लिए, मेरे एपीआई वस्तुओं में से प्रत्येक के लिए
2. एक अलग सेवा एपीआई URL प्राप्त स्थापित करने के लिए, लोगों को releatd API कॉल के लिए peopleAPI.service, गेम-रिलीज एपीआई कॉल आदि के लिए gameAPI.service ..
3. कुछ भी अलग जो मुझे अभी भी पता नहीं है?

Answer 1

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

} 

कक्षाएं कि 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/

Answer 2

बिट उलझन extends साथ और सभी @thierry द्वारा प्रदान की जवाब के रूप में, आप एक सामान्य वर्ग/सेवा का उपयोग कर सकते हैं, जिसमें आप अपने सभी ग्लोबल वेरिएबल्स को स्टोर कर सकते हैं और बूटस्ट्रैपिंग के समय उस वर्ग को इंजेक्ट कर सकते हैं ताकि क्लास अब ऐप के सभी अन्य वर्गों/घटकों के लिए उपलब्ध हो और अब भी आप आसानी से अपनी विविधता बदल सकें बस के बजाय सभी घटकों में परिवर्तन करने के लिए एक ही स्थान पर बदल कर ले मूल्य यहाँ उसी के उदाहरण है -

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 वर्ग सभी अन्य वर्गों के लिए उपलब्ध है,

अब भी जब आप उपयोग करते हैं तो प्रदाताओं की सूची में इस कक्षा को पंजीकृत करने की आवश्यकता नहीं होती है क्योंकि कोणीय स्वयं सभी घटकों में इसे प्रारंभ करता है, अब इन वैश्विक चर/फ़ंक्शन का उपयोग करें इस तरह की कक्षा -

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