Question

我的情况

我有一个app.module，它有一个bootstrap app.component

和路由器 base 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

在我的父控制器解析数据之前阻止子组件呈现

下一步

1 个答案: