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

Question

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

场景:假设我有 3 个组件，应用程序 (ROOT)、主页和关于。 如果我将这段代码放在我的 About 组件中，我希望它在实例化之前等待 20 秒，相反，组件会立即实例化，只有当我离开这个组件时，它才会触发该功能，我等待 20 秒才能到达主页。

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

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

Answer 1

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

1) 您可以扩展 Router-Outlet 类，对于每个事件组件，您可以等待 20 秒并轻松处理 singedIn 用户数据(两者都可以在单个文件或单个位置处理) .

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

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

If I place this code in my About component, I expect it to wait 20seconds before it instantiate, instead, the component gets instantiated instantly...

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