Angular 2/4 中的并行（异步非阻塞）路由答案

【问题标题】：Parallel (Asynchronous Non Blocking) Routing In Angular 2/4Angular 2/4 中的并行（异步非阻塞）路由
【发布时间】：2017-11-30 11:00:59
【问题描述】：

该应用程序有一个包含 2 到 3 个类别按钮的页面。基本上，单击按钮将拉取每个类别中的项目列表，一旦 API 获取的数据可用，该页面就会显示。

我已经设计了带有解析 API 调用的 Angular 2 应用程序路由，当我们将应用程序功能迁移到 Angular 4 时，我不应该在页面加载时用微调器阻塞整个页面。

当用户点击一个类别时，如果响应延迟，他可能会点击另一个类别。当他导航回来时，他希望数据被加载到以前点击的类别中，但由于Navigation ID does not match with the current route Angular 2/4 取消了路由

为了更好地理解，请参阅下面的 plnkr 链接。 http://embed.plnkr.co/UiyhZWCl63Tfq41WY48q/

同时点击星球和人物，观察只有一个部分加载，其他部分不加载数据。如果您进行检查，您会看到引发了 NavigationCancel 事件

【问题讨论】：

plunker 不工作，您能检查一下吗？
@Hurix plnkr 抛出错误 'no provider for ApplicationRef'
@trungk18 现在更正了 plnkr
@Dhyey 更正了 plnkr 链接。请立即查看
我认为因为在使用resolve时，这意味着我们需要在导航之前获得一些东西。因此，如果您在当前路线得到解决之前导航到另一条路线，它将被取消。 @trungk18 的回答也是我的建议

【解决方案1】：

不确定是否有资格解释解析器如何在 Angular 2 上为路由器工作，但只是再次查看了他们的 document。

总而言之，您希望延迟渲染路由组件，直到所有已获取必要的数据。

你需要一个解析器。

据我了解，如果您想完全切换视图并在切换前获取数据，解析器会有所帮助。所以数据在路由被激活的那一刻就准备好了。这也允许您在路由到组件之前处理错误。考虑一下主从布局，您单击一个项目，它会导航到详细视图。导航到没有记录的 id 的详细信息是没有意义的，最好将用户送回列表。

当您想根据路线显示不同的出口时，您的情况并不常见。并且您希望在单击人/星球的那一刻，它会直接渲染组件并开始获取数据。您可能还想显示占位符“正在加载...”。所以我建议为此目的使用 ngOnInit 钩子。

【讨论】：

@trunkgk18 正如我所说，应用程序设计无法更改，因为它是一个现有的应用程序并且即将投入生产。我们的应用程序是多标签/页面应用程序，用户将单击多个链接并期望在后台加载。 Angular 至少可以支持命名插座的异步路由。
是的，我明白了。如果是这样的话，我也在这里等待大伙的答复。