I've got problem with Angular 2 / web service call. My idea is to create service as injectable to use it within component that has to be localized (in these terms, use different languages). My strings are stored in database and what I need to do is to get them using the web service and store them in associative array. Then provide method to get value by the key from it. Here is my sample code:
import {Injectable} from "@angular/core";
import { Http, Headers, RequestOptions, Response } from "@angular/http";
import "rxjs/add/operator/map";
import "rxjs/add/operator/share";
import myGlobals = require("./global");
@Injectable()
export class LocalizationService {
private serviceUrl = myGlobals.urlPrefix + "api/public/Localization.asmx/GetStrings"; // url to web api
private observable: any;
private locString: {};
private finished: boolean = false;
constructor(private http: Http) {
this.loadStrings("EN");
}
private loadStrings(LanguageCode: string): void {
let body: string = JSON.stringify({ LanguageCode });
let headers: Headers = new Headers({
"Access-Control-Allow-Origin": "*",
"Content-Type": "application/json"
});
let options: RequestOptions = new RequestOptions({ headers: headers });
this.observable = this.http.post(this.serviceUrl, body, options)
.map(response => {
this.observable = null;
let responseText: string = response.text().substring(0, response.text().lastIndexOf("{"));
this.locString = JSON.parse(responseText).Data;
this.finished = true;
})
.share();
return;
}
public getStr(code: string): string {
let returnString: string;
try {
returnString = this.locString[code];
}
catch (error)
{
returnString = "";
}
return returnString;
}
}
Now what I cannot solve: the constructor calls the web service and ends immediately, it doesn't wait for the response. So when I use this injectable service in my component, that has to be rendered in correct language, the strings are not loaded during the render time. To be precise, when I set the breakpoint to the .map() call, it never gets hit. This is not the worst problem, I can do it using promise as I'm doing it on other places in app. Promises are working good for me when I need to call web service. Problem is that it doesn't wait for replay from server. I've checked other questions and answers such as
What is the correct way to share the result of an Angular 2 Http network call in RxJs 5?
but this doesn't help me in any way. I can't make the application wait till the response is returned. Is there anybody who can tell me what am I doing wrong?