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

标签 angular angular2-routing angular2-router angular2-router3

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

最佳答案

不确定是否有资格解释解析器如何在 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/

关于angular - Angular 2/4 中的并行(异步非阻塞)路由,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44779461/

相关文章:

angular - 为什么添加关键字 `let` 或 `var` 会使代码无法编译

html - 使用 Angular 4 渲染 blob 图像

authentication - LoggedInOutlet angular2 身份验证 - Router v3.0.0-alpha8 - ComponentInstruction 在哪里?

Angular 2 路由守卫不等待设置值

Angular 2 新 (RC1) 路由器。可以重用接口(interface)

angular - 无法绑定(bind)到 'href',因为它不是已知的 native 属性

angular - 有没有办法等待所有 Angular 2 组件被渲染?

angular - CanDeactivate 确认消息

angular - 安装angular2 RC4路由器时找不到兼容版本: @angular/router@^2. 0.0-rc.4错误

javascript - 将查询结果存储在局部变量中并在 Angular 中发送相同的确认