TypeScript - 我無法用http調用我的json使用Angular 2

Question

我想開發一個json的文件配置，並使用http調用獲取構造函數，並將配置文件的值返回給另一個組件。但是，當返回給我的價值未定義。

我Config.json

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

我Config.Service

出口類的ConfigService { 網址：字符串;現在

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

我的其他組件

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

} 

我已經不知道該如何解決這個問題，我需要你們的幫助，我不是很有經驗的角度2. 非常感謝。

Answer 1

這裏的問題是配置是異步加載的。

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

見：具有加載的配置後

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

另一種方法是自舉異步：你可以使用類似的東西借力flatMap操作：

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

，並在你的組件這個問題的第二種方法：

• angular2 bootstrap with data from ajax call(s)

你可以走得更遠通過混合使用CustomRequestOptions最後一個辦法：

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

看到這個問題：

• Angular 2 - global variable for all components