My situation
I have an app.module, wich bootstrap app.component
and the router base href = '/'
which loads my home.component
where i have method onInit() where i getting my data from the api using RiotService
this.riot.Summoner.byName(this.summoner, this.region);
so i can do like
this.riot.Summoner.byName(this.summoner, this.region).then(()=> {
//do something with data
//this.riot.Summoner.info
});
Next step
I have my summoner.component and it has its own route '/summonerName/etc' where i need to use data retrieved from parent component (home.component)
Its okay when i go first to '/', then to '/summonerName/etc' using [routerLink] for example
but when i go directly to '/summonerName/etc' or refresh the page
my home.component starts to retrieve data from my RiotServive and when i try to get this.riot.Summoner.info i get undefined when my summoner.component got rendered.
I know its all because of my promise resolving a bit longer than child component rendering.
So i have a question.
How can i prevent my child component render before my parent controller resolve the data
Here is my RiotService
request<T>(url:string, errorHandler?: (error: any) => Promise<any>){
return this.http.get(url)
.toPromise()
.then(response => response.json() as T)
.catch(errorHandler || this.handleError);
}
byName(summonerName:string, region:string){
return this.request<ISummoner>(
`some url to get data`)
.then((response) => {
this.info = response as ISummoner
})
}
