在我的父控制器解析数据之前防止子组件渲染

Question

我的情况

我有一个

app.module

，带有 bootstrap app.component

和路由器 基本href = '/'

加载我的 home.component

我有 onInit() 方法 我使用 RiotService

从 API 获取数据

this.riot.Summoner.byName(this.summoner, this.region);

所以我可以这样做

this.riot.Summoner.byName(this.summoner, this.region).then(()=> {
   //do something with data
   //this.riot.Summoner.info
});

下一步##

我有我的召唤者组件 并且它有自己的路线'/summonerName/etc' 我需要使用从父组件（home.component）检索的数据

当我先转到 '/'，然后再转到 '/summonerName/etc'（例如使用

[routerLink]

）时，就可以了

但是当我直接进入'/summonerName/etc'或刷新页面时

我的 home.component 开始从我的

RiotServive

检索数据，当我尝试获取

this.riot.Summoner.info

时，当我的

undefined

渲染时，我得到

summoner.component

。

我知道这一切都是因为我承诺解决的时间比子组件渲染要长一些。

如何在父控制器解析数据之前阻止子组件渲染？

这是我的 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
        })
}

Answer 1

只需使用

Resolvers

，它将确保在实际激活路线之前加载数据。

下面的文章通过逐步示例解释了这个想法

https://blog.thoughtram.io/angular/2016/10/10/resolving-route-data-in-angular-2.html