Angular2 RC1 - 加载数据后加载路由（路由器出口）答案

【问题标题】：Angular2 RC1 - Load route (router-outlet) after data has loadedAngular2 RC1 - 加载数据后加载路由（路由器出口）
【发布时间】：2016-06-08 22:01:57
【问题描述】：

我在 Angular2 RC1 中使用新的路由器（不推荐使用路由器）。在应用程序继续加载之前，我需要能够加载 JSON 配置文件。我正在使用 Config 类来获取我的 JSON 配置，但问题是，我不希望在我的配置完成加载之前加载路由器插座。

我尝试用*ngIf 包装<router-outlet>，却遇到了这个问题：https://github.com/angular/angular/issues/8539

我也尝试扩展<router-outlet>，根据这个article，但没有运气（不适用于RC1）

Angular1 有办法“重新加载”路由，但这在 NG2 中似乎不存在。

我该怎么做？如何在应用程序加载后加载我的 JSON 配置文件，并在配置完成后渲染应用程序？有没有其他人成功做到这一点？

【问题讨论】：

这个路由器很快将被再次更换。我认为最好的方法是通过将*ngIf="data" 添加到路由组件视图中的最外层元素来延迟组件的呈现。

标签： javascript angular angular2-routing

【解决方案1】：

在新路由器(>= RC.3)https://angular.io/docs/ts/latest/api/router/index/Router-interface.html#!#resetConfig-anchorresetConfig可以使用

router.resetConfig([
 { path: 'team/:id', component: TeamCmp, children: [
   { path: 'simple', component: SimpleCmp },
   { path: 'user/:name', component: UserCmp }
 ] }
]);

对于您的情况，我将使用一些虚拟路由和虚拟组件初始化路由器，然后在您的 JSON 可用后加载新路由并导航到新的默认路由。

https://github.com/angular/angular/issues/11437#issuecomment-245995186 提供了一个RC.6 Plunker

【讨论】：

【解决方案2】：

考虑加载页面怎么样？这样，如果您的数据尚未完全加载，它会显示加载页面而不是您的路线。

有关如何在 Angular2 中实现加载屏幕的建议，请参阅 this question。

更新：

另一方面，我发现我们可以使用路由解析器预加载数据。我也在学习它，this angular documentation 可能会有所帮助。

【讨论】：