8

该应用程序有一个包含 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 事件被抛出

4

1 回答 1

4

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

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

你需要一个解析器。

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

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

工作插件： https ://embed.plnkr.co/rSEjb46WI09PsOtClJn5/

于 2017-07-03T10:14:57.580 回答