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

Question

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

我已经设计了具有解析API调用的angular 2 app路由,当我们将应用程序功能迁移到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 上为路由器工作，但只是再次浏览了他们的文档。

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

你需要一个解析器。

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

当您想在路线上显示不同的出口基地时，您的情况并不常见。您希望在单击“人物/星球”时，它将直接渲染组件并开始获取数据。您可能还想显示占位符“正在加载...”。所以我建议使用 ngOnInit 钩子来达到这个目的。