Angular2-利用路由复用策略实现tab标签页

Angular2-利用路由复用策略实现tab标签页

一、前言

公司从去年十月开始筹备新框架的开发,俊霖有幸成为框架组成员。作为此次新框架开发最大特点是前后端完全分离,而前端采用的框架则是Angular2。利用客户的习惯,企业管理系统大部分利用tabs标签页打开,看到需求的我,一脸愁眉,仔细阅读angular官网教程,发现可以使用路由复用策略(RouteReuseStrategy)来实现。这里感谢知乎大神 卡色 的文章指导。

路由复用策略是用于解决这种事情:在移动端中用户通过关键词搜索商品,而死不死的这样的列表通常都会是自动下一页动作,此时用户好不容易滚动到第二页并找到想要看的商品时,路由至商品详情页,然后一个后退……用户懵逼了。

Angular路由与组件一开始就透过 RouterModule.forRoot 形成一种关系,当路由命中时利用 ComponentFactoryResolver 构建组件,这是路由的本质。

而每一个路由并不一定是一次性消费,Angular 利用 RouteReuseStrategy 贯穿路由状态并决定构建组件的方式;当然默认情况下(DefaultRouteReuseStrategy)像上面举的例子,一切都不进行任何处理。

二、原理

RouteReuseStrategy 我们称它为:路由复用策略;并不复杂,提供了几种办法通俗易懂的方法:

  • shouldDetach 是否允许复用路由
  • store 当路由离开时会触发,存储路由
  • shouldAttach 是否允许还原路由
  • retrieve 获取存储路由
  • shouldReuseRoute 进入路由触发,是否同一路由时复用路由

这看起来就像是一个时间轴关系,用一种白话文像是这样:把路由 /list 设置为允许复用(shouldDetach),然后将路由快照存在 store 当中;当 shouldReuseRoute 成立时即:再次遇到 /list 路由后表示需要复用路由,先判断 shouldAttach 是否允许还原,最后从 retrieve 拿到路由快照并构建组件。

当理解这一原理时,假如我们拿开头搜索列表返回的问题就变得非常容易解决。

三、实现

(一)创建策略

创建一个名为SimpleReuseStrategy的策略文件。因为代码里注释比较完整,就不再赘述。内容如下:

(二)定义组件

我们利用angular官方的脚手架工具创建一个名叫content-tabs的组件。组件内容如下:

 

(三)content-tabs的html

样式文件就不放出来了,模仿H+的样式文件夹写的,修改了a标签存放i标签的小小样式。

最后,别忘了在根模块里添加提供器:

至此,所有的代码就完成了。路由由angular路由配置而成。类似如下:

完成的效果如下图:

因为我是远程到公司电脑截的图,有点模糊,将就看了,哈哈~

Angular2-利用路由复用策略实现tab标签页

Angular2-利用路由复用策略实现tab标签页

 

 

俊霖

发表评论

您必须