Question

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

场景：假设我有3个组件，App（ROOT），Home＆amp;关于。如果我将此代码放在我的About组件中，我希望它在实例化之前等待20秒，相反，组件会立即实例化，只有当我离开这个组件时，它才触发该功能，我等待20秒才能到达Home。

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

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

Answer 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)
    })
})

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

1 个答案: