How to wait until your request is triggered in another component?

Question to experts on Angular2.
Currently doing project international (ngx-translate), but there's a problem.

* [picture 1] -> AppComponent
By initializing the AppComponent is translateSetup function(), which writes into the variable languageCode language code (default, or English) and then stores this value in localStorage.
In the constructor I subscribe to user, and if it came in languageCode variable to set selected language and overwrite the value in localStorage.
59d11c46154f5804352677.png

* [picture 2] -> FooterComponent
By initializing the FooterComponent (which is a child AppComponent) I take the value of the languageCode from localStorage and then use it (for example, just type in the console).
However, I expect that if the AppComponent will get the same in-FA of the user data in localStorage overwrite, then FooterComponent will wait until the end of the process.
59d11c531f414562033105.png

* [picture 3] -> ConsoleLog
The output in the console, it turns out that the AppComponent first initialized, then initialized FooterComponent, and then came in-FA about the user. And Yes, localStorage has periapicals, but FooterComponent will not get these changes, as it was initialized before.
59d11c60914d9678136180.png

How to make FooterComponent started to work only after vypolnena the code in the constructor of the component AppComponent (the place where executed subscription) ?
Or maybe you predlozhete a more appropriate way.

PS: thanks in advance !
June 14th 19 at 21:03
3 answers
June 14th 19 at 21:05
A few options offhand.
1) If FooterComponent located near AppComponent, use EventEmitter=)
2) If the footer is inside AppComponent, just make the Input property within the Footer, then just do the binding.
3) to Create an Observable event-based "storage" that occurs when you change the localStorage. Read more here and here. But keep in mind that the event occurs in the other tabs.
June 14th 19 at 21:07
A good solution is to use the Observable - but rather BehaviorSubject.
It is in contrast to the Observable always returns the last stored value.

You initialize the app, take the code from localstorage, and placed in a BehaviorSubject.
All other components subscribe to it and get the last value.
If at some point the value will change (I do not know, the user has chosen another language) - you are again placed in a BehaviorSubject and signed on all components (listeners) are notified of the change

// Behavior Is Subject

// initialize somewhere in the service and put the first value 
bSubject = new BehaviorSubject("a"); 

// create a method which will return our instance bSubject 
getSubject = () => return this.bSubject

// In Komponente injecton service method to call getSubject and subscribe
bSubject.subscribe((value) => {
 console.log("Subscription got", value); 
// Here is the action performed when you change the language 
});

// Later in another place, the user changes the language and we keep it again in the thread 
bSubject.next("c"); // Subscription got c
June 14th 19 at 21:09
The correct solution would be to move the code language in Resolver root routes, which will be a Parente for the rest of the ranting of the project. https://angular.io/api/router/Resolve
Then in any case storadzh(or API to the server) prochitaete before any of inity any component. Because it makes no sense to show any page if we not even know the language.

And there it is possible to write in the BehaviorSubject. Which can be read in any component without fear that it is empty

Find more questions by tags JavaScriptAngularTypeScript