TypeScript - Ich kann meine JSON mit http Get mit Angular 2

Question

nicht aufrufen Ich möchte eine Dateikonfiguration von JSON zu entwickeln und es wird aufgerufen mit http den Konstruktor abrufen und den Wert, ich möchte die Konfigurationsdatei an eine andere Komponente zurückgeben. Aber wenn die Rendite mir einen Wert undefiniert gibt.

Mein config.json

[ {"urlServer": "http://localhost:56877"}] 

Mein Config.Service

Exportklasse ConfigService { url: string;

constructor(public _http: Http) 
{ 
    let injector = Injector.resolveAndCreate([loggerService]); 
    let logger = injector.get(loggerService); 

    try { 
     return this._http.get('/app/config.json', 
     { 
      headers: contentHeaders 
     }) 
     .map((res: any) => 
     { 
      let data = <configModel>res.json(); 
      this.url = data.urlServer; 
      JSON.stringify(this.url); 
     }); 
    } 
    catch (ex) { 
     logger.registarErros('configService', ex); 
    } 
} 

returnConfig() 
{ 
    return this.url; 
} 

Jetzt ist meine andere Komponente

constructor(public _http: Http, public config: configService) 
{ 
    this.token = sessionStorage.getItem('token'); 
    this.username = sessionStorage.getItem('username'); 
} 

login(username: String, password: String) 
{ 
    let injector = Injector.resolveAndCreate([loggerService]); 
    let logger = injector.get(loggerService); 

    try 
    { 
     alert(this.config.url); 
     return this._http.post('http://localhost:56877/api/Login/EfectuaLogin', JSON.stringify({ username, password }), 
     { 
      headers: contentHeaders 
     }) 
     .map((res: any) => 
     { 
      let data = <authLoginModel>res.json(); 
      this.token = data.token; 
      this.username = data.nome; 
      sessionStorage.setItem('token', this.token); 
      sessionStorage.setItem('username', this.username); 
      return Observable.of('authObservable'); 
     }); 
    } 
    catch (ex) { 
     logger.registarErros('authentication', ex); 
    } 

} 

ich nicht mehr weiß, wie das Problem zu lösen, ich brauche Ihre Hilfe, ich bin mit kantigem 2. Dank nicht sehr erfahren sehr viel.

Answer 1

Das Problem hier ist, dass die Konfiguration asynchron geladen wird.

@Injectable() 
export class ConfigService { 
    urlServer:string; 

    constructor(public _http: Http) { 
    } 

    getConfig() { 
    if (this.urlServer) { 
     return Observable.of(this.urlServer); 
    } 

    return this._http.get('/app/config.json', { 
     headers: contentHeaders 
    }) 
    .map((res: any) => { 
     let data = <configModel>res.json(); 
     return data.urlServer; 
    }).do(urlServer => { 
     this.urlServer = urlServer; 
    }); 
    } 
} 

und in Ihrer Komponente: Sie könnten etwas wie die Nutzung der flatMap Operator

login(username: String, password: String) { 
    return this.configService.getConfig().flatMap(urlServer => { 
    this._http.post('http://localhost:56877/api/Login/EfectuaLogin', 
     JSON.stringify({ username, password }), 
     { 
     headers: contentHeaders 
     }) 
     .map((res: any) => 
     { 
     let data = <authLoginModel>res.json(); 
     this.token = data.token; 
     this.username = data.nome; 
     sessionStorage.setItem('token', this.token); 
     sessionStorage.setItem('username', this.username); 
     return data; // or something else 
     }); 
    } 
    }); 
} 

Ein anderer Ansatz wäre Bootstrap asynchron nach der Konfiguration geladen haben:

var app = platform(BROWSER_PROVIDERS) 
    .application([BROWSER_APP_PROVIDERS, appProviders]); 

service.getConfig().flatMap((url) => { 
    var configProvider = new Provider('urlServer', { useValue: urlServer}); 
    return app.bootstrap(appComponentType, [ configProvider ]); 
}).toPromise(); 

See Diese Frage für den zweiten Ansatz:

• angular2 bootstrap with data from ajax call(s)

können Sie noch weiter gehen, indem der letzte Ansatz mit CustomRequestOptions Mischen:

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

diese Frage Siehe:

• Angular 2 - global variable for all components