Angular2 cli - 如何在 canActivate 触发器之前在引导期间加载外部数据？答案

【问题标题】：Angular2 cli - how to load external data during bootstrap before canActivate triggers?Angular2 cli - 如何在 canActivate 触发器之前在引导期间加载外部数据？
【发布时间】：2017-10-23 12:37:46
【问题描述】：

我有一些 http 调用需要在 canActivate 保护方法触发之前在应用程序组件中处理。

目前的路由是这样的：

 { path: '', redirectTo: '/home', pathMatch: 'full' },
 { path: 'home',  component: HomeComponent, canActivate: [AccessGuard] },

所以我希望 AccessGuard 的 canActivate 方法在 App 组件构造函数完成调用所有 http 调用后运行。

但是现在在 AppComponent 中的 http 调用完成之前，canActivate 会触发，因此在存储中找不到数据。

【问题讨论】：

如果你在home 路径中添加一个孩子会怎样？然后 home 进行 HTTP 调用，您可以根据结果显示router-outlet
@trichetriche：你能给我举个例子来说明你的意思吗？我家里没有任何子组件，它如何工作？

标签： angular store

【解决方案1】：

我发表了评论，但现在我需要使用答案。

所以，如果你为你的路由组件使用一个子组件：

{ path: 'home',  component: HomeComponent, canActivateChild: [AccessGuard], children: [
    // Paths to your children
] },

这样，home 可以进行 HTTP 调用，而 children 则受到守卫的保护。这是你想要的，对吧？

评论后编辑

试试这个：

{ path: 'home',  component: HomeComponent, canActivate: [AccessGuard] }

作为你唯一的路线，并且：

this.yourHttpService.yourCall().subscribe(data => {
    this.router.navigateByUrl('/home');
})

在您的应用组件中（不要忘记从@angular/router 导入Router）

【讨论】：

HTTP 调用是在 AppComponent 中进行的，而不是在 HomeComponent 中。当我在浏览器中访问 url localhost:4200 时，我会根据上面显示的带有 canActivate 的路由重定向到主页。问题是 AppComponent 的 Http 调用尚未完成，而 canActivate 方法首先完成。如何在触发 canActivate 之前确保 AppComponent 已完全完成
抱歉，没有看到您的编辑。您的应用程序不会通过 appComponent，因为您进行了直接重定向。我将编辑我的答案。
是的，我确实想重定向它，但希望在调用 canActive 之前先完成 Http 调用。如果我将 http 调用移动到 gaurd 本身，那么这意味着每次调用 canActivate （对于所有路由）我都必须进行 http 调用。相反，我想在应用程序组件中进行 http 调用并将数据存储在 redux 存储中，然后任何组件（包括 canActivate ）都可以直接查询存储而不是去服务器（http 调用）。我希望这是有道理的。提前致谢
很抱歉我没有看到您的编辑，请查看我的更新答案，如果您明白了，请告诉我
问题是即使我尝试在浏览器中访问 url localhost:4200/home 我仍然会在 AppComponent 的 Http 调用完成之前先完成 canActivate。我认为这与异步调用有关，即 http 调用需要更长的时间，并且在 canActivate 之间首先完成......