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

前端之家收集整理的这篇文章主要介绍了Angular 2/4中的并行(异步非阻塞)路由前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
该应用程序有一个包含2到3个类别按钮的页面.基本上,按钮单击将拉出每个类别中的项目列表,一旦API获取的数据可用,就应显示页面.

我已经设计了具有解析API调用的angular 2 app路由,当我们将应用程序功能迁移到angular 4时,我不应该在页面加载时使用微调器阻止整个页面.

用户点击一个类别时,如果响应被延迟,他可以单击另一个类别.当他向后导航时,他会期望在之前点击的类别中加载数据,但由于导航ID与当前路线不匹配,Angular 2/4取消了路线

为了更好地理解,请查看下面的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.

因此,根据我的理解,解析器将有助于您想要完全切换视图并在切换之前获取数据.因此,一旦激活路线,数据就准备就绪.这也允许您在路由到组件之前处理错误.考虑主 – 细节布局,您可以单击某个项目,导航到详细视图.导航到没有记录的id的详细信息是没有意义的,最好将用户发送回列表.

当您想要在路线上显示不同的插座时,您的情况并不常见.您希望在点击人/星球的那一刻,它将直接呈现组件并开始获取数据.您可能还想显示占位符“正在加载…”.所以我建议使用ngOnInit钩子来达到这个目的.

工作人员:https://embed.plnkr.co/rSEjb46WI09PsOtClJn5/

猜你在找的Angularjs相关文章