angular - Angular 2/4 中的并行(异步非阻塞)路由

Question

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

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

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

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

同时点击行星和人，观察只有一个部分加载数据，其他部分不加载数据。如果你检查你可以看到 NavigationCancel 事件被抛出

Answer 1

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

In summary, you want to delay rendering the routed component until all necessary data have been fetched.

You need a resolver.

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

当您想在路线上显示不同的导出基地时，您的情况并不常见。你希望在你点击 people/planet 的那一刻，它会直接渲染组件并开始获取数据。您可能还想显示占位符“正在加载...”。所以我建议为此目的使用 ngOnInit 钩子(Hook)。

正在工作的 plunker:https://embed.plnkr.co/rSEjb46WI09PsOtClJn5/