项目上在使用NG-Alain的过程中遇到了一个比较棘手的问题,但采用一种曲线救国的方式解决了,但觉得肯定会有更好的方式去解决,但是目前为止,没有找到更好的方法,所以将这个过程记录下来。
项目开发的是一套web端的后台数据管理软件,采用的是主流后台的页面布局方式,左侧用sidebar-nav控件来实现菜单栏导航,中间采用nz-tab和reuse-tab 路由复用标签来实现表单页面的展示与切换。
菜单栏的展示是保存在前台的一个json文件中,每个菜单的终点都对应一个component,然后通过路由机制来映射加载,这样是没什么问题的。
最近有了一个新的需求,要在前台动态的显示页面,以往增加一个页面需要去开发后台接口,开发前端页面。
但现在不是这样,动态显示的页面内容是固定的,变化的只有内部的数据,而且要支持无限的添加。
比如说,现在有10个数据展示的需求,即需要10个页面去展示,那我在特定模块中去添加这10个页面的配置参数,点击保存,然后左侧菜单栏就会动态的添加上这10个页面,中间的构建过程不细说了。大体效果如下图
开发到了页面加载的时候,问题来了,因为是动态扩展的左侧菜单栏节点,因此没有实际数量的component去对应他,所以出现了一个现象,通过菜单栏点击打开动态页面时,菜单栏自动闭合了。
正常应该是这种状态
现实却是这种状态
然后就去翻官方文档,发现MenuService 菜单服务有一个方法
然后我尝试去用,这个需要放到ngOnInit里面
奇怪的问题又出现了,菜单栏确实可以展开,但是需要鼠标移到菜单栏上,我console了一下menu的数据,发现数据已经更新上了,那么问题可能出现在渲染上
接着我又发现官方文档中的一个方法,重置菜单,看描述,似乎这个方法并不是用来刷新渲染的
到了现在这个问题已经困扰我很久了,抱着死马当活马医的想法,我尝试了一下,解决了…
在这贴一下代码吧,思路就是,在app.component.ts中的ngOnInit加入以下代码,因为我观察到不管从哪里触发页面的切换,都会跑这里的方法,所以我放在了这里,然后因为只有部分路由才会需要去刷新菜单的渲染,所以加了个前缀的判断。
let url = decodeURI(location.hash.split('#')[1]);
if (url && url.indexOf("/DynamicForm/TableRender") !== -1) {
let arr = url.split("/");
arr.pop();
let name = arr.pop();
setTimeout(() => {
this.titleSrv.setTitle(name);
this.menuService.openedByUrl(url, true);
this.menuService.resume();
}, 20);
}