基于Angular2+的Tab页+侧边菜单比较完整的解决方案

Posted 2023-03-09

参考技术A 左侧导航，右侧侧边辅助菜单，中间主业务界面；左侧导航是根据用户权限动态生成的。

中间的主业务界面是通过Tab页的方式实现，可以根据左侧导航栏的点击行为动态打开或切换到相应的Tab页，当然，这里的Tab页要支持Tab页基本应该具有的功能特点，包括打开、切换和关闭（拖换Tab页次序功能后期可以试试加上）。

Tab页内的内容是一个Angular的组件，在Tab页切换的时候要求组件状态保持（不重新加载，即组件数据不丢失）。

辅助菜单完成的功能是对主业务界面的具体数据进行操作，比如主业务是“用户管理”，显示的是用户数据表，辅助菜单显示的就是用户数据表的具体某一行的内容（如姓名、工号、电话……）。

辅助菜单根据主业务表显示的组件动态切换内容，也要求状态保持。

分为左中右三部分，左侧导航和右侧辅助菜单分别是一个组件。

使用 mat-tab-group 标签实现，Tab页内加载组件通过正常的前端路由实现。

状态保持通过自定义路由策略（ RouteReuseStrategy ）实现。

通过辅助路由实现，难点在于主业务部分与辅助菜单部分传值方式。

根据具体业务逻辑，加载不同的主路由与辅助路由，辅助路由部分同样采用自定义路由策略来实现状态保持。

moduleName 定义的是这个总的JSON对象中模块所对应的键名， moduleParams 是具体存数据的结构。下面说明一下每个存储结构具体的含义：