Angular 2在实例化子组件之前解析根组件

【问题标题】：Angular 2 Resolve Root Component before instantiating child componentsAngular 2在实例化子组件之前解析根组件
【发布时间】：2016-07-15 14:53:06
【问题描述】：

当我刷新我的网络应用程序时，我希望它在实例化任何组件或路由之前请求潜在的登录用户数据。如果找到了用户的数据，我想将其注入到我所有其他子组件都依赖的服务中。

场景：假设我有 3 个组件，App (ROOT)、Home 和 About。如果我将此代码放在我的 About 组件中，我希望它在实例化之前等待 20 秒，相反，该组件会立即实例化，只有当我离开该组件时，它才会触发该功能，然后我等待 20 秒才能到达主页。

routerOnActivate(next: ComponentInstruction, prev: ComponentInstruction) {
    return new Promise((res, rej) => {
        setTimeout(function () {
            res(true);
        }, 20000)
    })
}

理想情况下，我不希望解析连接到任何路由，我希望在实例化任何路由之前请求根组件中的解析。

【问题讨论】：

您找到解决方案了吗？ @dieheld

标签： typescript routes angular components resolve

【解决方案1】：

实际上有两种方法可以做到这一点。

1) 您可以扩展Router-Outlet 类，对于每个活动组件，您可以等待 20 秒并轻松处理 singedIn 用户数据（都可以在单个文件或单个位置处理）。

2) 或者在单个组件中，您可以使用 @CanActivate 挂钩并等待 20 秒，当组件被激活时，您可以将 shareService（可能包含用户信息对象）注入构造函数并做进一步的事情。

为此，您可以在组件中使用 @CanActivate 并等待 20 秒才能启动。

如果我将此代码放在我的 About 组件中，我希望它等待相反，在它实例化前 20 秒，组件得到立即实例化...

@CanActivate((next: ComponentInstruction, previous: ComponentInstruction) => {
   return new Promise((res, rej) => {
        setTimeout(function () {
            res(true);
        }, 20000)
    })
})

【讨论】：