Angular 2 - Finden Sie dynamisch Basis-URL in den HTTP-Anfragen (Dienste)

Question

Ich frage mich, ob es eine dynamische Möglichkeit gibt, die Basis-URL zu erhalten, in den HTTP-Anfragen zu verwenden?

Gibt es eine Möglichkeit, die http://192.123.24.2:8080 dynamisch zu bekommen?

public getAllTickets() { 
    this._http.get('http://192.123.24.2:8080/services/', { 
     method: 'GET', 
     headers: new Headers([ 
      'Accept', 'application/json', 
      'Content-Type', 'application/json' 
     ]) 
    }) 

Also, ich meine Anfrage würde in etwa so aussehen:

public getAvailableVersions() { 
    this._http.get('../services', { 
     method: 'GET', 
     headers: new Headers([ 
      'Accept', 'application/json', 
      'Content-Type', 'application/json' 
     ]) 
    }) 

ich nach einer Möglichkeit, die URL für die REST-Anrufe zu Fest Code nicht mit. Oder ist die einzige Option, eine globale Variable mit der URL zu haben?

Danke!

Answer 1

Mit der Version 2.0.0-beta.6 von Angular2, können Sie überschreiben die merge Methode

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

export class CustomRequestOptions extends BaseRequestOptions { 

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

Sie diese Klasse auf diese Weise registrieren:

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

Ein anderer Ansatz erweitern könnte das HTTP-Objekt, das am Anfang der Anforderungs-URL eine Basis-URL hinzufügen soll.

Zunächst könnten Sie eine Klasse erstellen, die die Http eines mit baseUrl Eigenschaft erweitert:

@Injectable() 
export class CustomHttp extends Http { 
    constructor(backend: ConnectionBackend, defaultOptions: RequestOptions) { 
    super(backend, defaultOptions); 
    this.baseUrl = 'http://192.123.24.2:8080'; 
    } 

    request(url: string | Request, options?: RequestOptionsArgs): Observable<Response> { 
    console.log('request...'); 
    return super.request(this.baseUrl + url, options).catch(res => { 
     // do something 
    });   
    } 

    get(url: string, options?: RequestOptionsArgs): Observable<Response> { 
    console.log('get...'); 
    return super.get(this.baseUrl + url, options).catch(res => { 
     // do something 
    }); 
    } 
} 

und registrieren sie, wie unten beschrieben:

bootstrap(AppComponent, [HTTP_PROVIDERS, 
    new Provider(Http, { 
     useFactory: (backend: XHRBackend, defaultOptions: RequestOptions) => new CustomHttp(backend, defaultOptions), 
     deps: [XHRBackend, RequestOptions] 
    }) 
]); 

Answer 2

Sie können eine Datei mit Ihren Anmeldeinformationen erstellen

credentials.ts

export var credentials = { 
    client_id: 1234, 
    client_secret: 'secret', 
    host: 'http://192.123.24.2:8080' 
} 

Und importieren Sie es in Ihre Datei

Und damit Sie dev/prod Anmeldeinformationen

Answer 3

import {LocationStrategy} from 'angular2/router'; 

constructor(private locationStrategy:LocationStrategy) { 
    console.log(locationStrategy.prepareExternalUrl('xxx')); 
} 

Siehe auch https://github.com/angular/angular/blob/1bec4f6c6135d7aaccec7492d70c36e1ceeaeefa/modules/angular2/test/router/path_location_strategy_spec.ts#L88