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

Question

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

场景：假设我有三个组件：App（根）、Home和About。如果我在我的About组件中放置这段代码，我期望它在实例化之前等待20秒钟，但实际上组件会立即被实例化，只有当我离开此组件时，它才会触发函数并且我要等待20秒才能到达Home。

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

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

- altus

---

你找到解决方案了吗？@dieheld - ifiok

Answer 1

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

1）您可以扩展Router-Outlet类，并且对于每个活动组件，您可以等待20秒并轻松处理已登录用户的数据（两者可以在单个文件或单个位置中处理）。

2）或者在各个组件中，您可以使用@CanActivate钩子，并等待20秒钟，当组件被激活时，您可以将shareService（可能包含用户信息对象）注入构造函数并进行进一步操作。

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

如果我将此代码放置在我的“关于”组件中，则期望它在实例化之前等待20秒钟，但实际上该组件会立即实例化...

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

- micronyks