如何以正確的方式訂閱getUrl。 Angular 2

Question

我有與json json文件。阿洛斯有服務，其中獲得URL稱爲ConfigurationService.ts和方法：getConfiguration（key）;

api應該像這樣工作：獲取網址，並在運行verifyLogin（）和當前url之後; 但我有訂閱問題，我認爲有一個簡單的方法。 這裏是configurationService.ts：

import {Injectable} from '@angular/core'; 
import {Http, Response} from '@angular/http'; 
import {Headers, RequestOptions} from '@angular/http'; 
import {Observable} from 'rxjs/Observable'; 

@Injectable() 
export class ConfigurationService { 
constructor(private http:Http) { 
} 
private result: Object; 
getConfiguration(key) { 
    return this.http.get('./app/config/config.json').map((res: Response) => { 
     this.result = res.json(); 
     return this.result[key]; 
    }); 
} 
} 

這裏是身份驗證服務：

import {Injectable} from '@angular/core'; 
import {Http, Response} from '@angular/http'; 
import {Headers, RequestOptions} from '@angular/http'; 
import {Observable} from 'rxjs/Observable'; 
import {HttpBaseClass} from './http_base_class'; 
import {ConfigurationService} from '../config/configuration_service'; 

@Injectable() 

export class AuthenticationService extends HttpBaseClass { 
result: { 
    ok: boolean; 
}; 



private verifyUrl = ''; 
private logoutUrl = ''; 

constructor (private http: Http, private configurationService: ConfigurationService) { 
    super(http); 
} 


private authRequest (url) { 
    let body = JSON.stringify({}); 
    let headers = new Headers({ 'Content-Type': 'application/json'}); 
    let options = new RequestOptions({ 
     headers: headers 
    }); 
    return this.http.post(url, body, options) 
     .map((res: Response) => res.json()) 
     .map(res => { 
      this.result = res; 
      return this.result.ok; 
     }); 
} 
//test - how to put received url into this.authRequest(this.verifyUrl) ?? 
// private x = this.configurationService.getConfiguration("verifyUrl").subscribe((result) => console.log(result)); 

//verify runs in appComponent oninit. 
verifyLogin() { 
    return this.authRequest(this.verifyUrl); 
} 
logout() { 
    return this.authRequest(this.logoutUrl); 
} 

}

HomeComponent.ts以防萬一：

ngOnInit() { 
    // check isLogged in 
    this.isLogged(); 
} 
//check if logged in 
isLogged() { 
    this.authenticationService.verifyLogin().subscribe((result) => { 
     if (result) { 
      this.structureRequest.sendRequest().subscribe((result) => this.viewNodes(result)); 
      //makes http request and puts result into contantArray 
     } else if (result === false) { 
      this.router.navigate(['/login']); 
     } 
    }); 
} 

更新： 我我試圖以下一種方式設置verifyLogin（）方法。但是，出現錯誤：「類型錯誤：this.authenticationService.verifyLogin（...）認購不是一個函數」

verifyLogin() { 
    return this.configurationService.getConfiguration("verifyUrl") 
     .subscribe((url) => { 
      // this.verifyUrl = url; 
      this.authRequest(url); 
     }); 
} 

Answer 1

你可以重寫與高速緩存和回調您的配置服務動態加載的配置數據：

@Injectable() 
export class ConfigurationService { 
    private _filePath: string = './src/config.json'; 
    private _configCache: any = null; 

    constructor(private _http: Http) { } 

    getConfig(key: string, callback: (value) => void) { 
    if (this._configCache) { 
     return callback(this._configCache[key]); 
    } 

    this._http.get(this._filePath) 
     .map(res => res.json()) 
     .subscribe(
     (data) => { 
      this._configCache = data; 
      callback(this._configCache[key]); 
     }, 
     (error) => { 
      console.log("Couldn't load config."); 
     }, 
     () => { console.log(this._configCache); } 
    ); 
    } 
} 

使用它，像這樣：

verifyLogin(callback: (data) => void) { 
    this.configService.getConfig("verifyUrl", (value) => { 
     this.authRequest(value).subscribe((data) => callback(data)); 
    }); 
} 

你isLogged方法：

//check if logged in 
isLogged() { 
    this.authenticationService.verifyLogin((result) => { 
     if (result) { 
      this.structureRequest.sendRequest().subscribe((result) => this.viewNodes(result)); 
      //makes http request and puts result into contantArray 
     } else if (result === false) { 
      this.router.navigate(['/login']); 
     } 
    }); 
} 

Plunker for example usage