菜单使用的是ng-alain的默认布局 菜单已经是定义好的组件
但是和产品要求的不一样的样式,只能自定义组件
现在问题是:
  1 自定义之后 权限怎么做✔️
  2 路由跳转✔️
  3 如果要收起左侧菜单--得单独写样式
 
 
思路一:就是nav配置
最开始默认布局发现了nav配置
 
这样是可以自定义菜单的样式了 但是配置acl报错
 
刚开始怀疑的是ng-for的原因或者是页面渲染或者是数据问题,在demo中验证,发现不是这些原因
 
又开始怀疑是标签写法的问题,删除了其他全部,但还是报错
 
所以我只能将demo改为ts文件试试,现在唯一的区别就是demo是在html文件和ts是分开,basic布局文件是ts,合并一个文件写的
但是将demo修改成template渲染,结果依旧,demo是OK的
现在只能怀疑是不是module的配置有什么不一样。
但是结果还是意料之中的相似
接下来,我在demo页的同级新建了一个ts和blank页面内容相同
 
 
结果是blank报错 而order模块下的test不报错,让我不由的又怀疑是模块的问题。
终于找到了,对比之后发现在layout的module中没有引入SharedModule,引入之后发现不报错ok了,但是具体是sharedModule中的哪个模块还得具体再看
 
然后找到shareModule,不难猜应该是和acl有关,引入之后发现ok了
import { DelonACLModule } from '@delon/acl';
这个问题真的是绕了好大一圈发现是模块没有引入。
要是在最开始怀疑module的时候好好看看 应该会更早解决吧。
 
======================分水岭=====================
 
好了,接下来就来看看,菜单权限控制的事吧!
很开心!!!菜单权限 就如下 解决了......
 
接下来 就是路由跳转以及拦截的事了
测试了从url输入没有的路由地址,会跳转到exception/404
点击跳转会不会有同样的效果呢?会跳转到exception/404
以上这两点测试会跳转404是因为本地理由中进行了配置。
 
但是 如果从url中输入一个 本地路由中有但是 没有权限的路由地址呢。答案是一样的,可以访问。
为什么呢?
原因是:menuServiece 和 aclService 已经帮我们处理好了权限相关数据层的事。
好了皆大欢喜
 
======================分水岭=====================
 
好了,接下来要做的事情就是样式的事了。一切都好说。
 
需要注意的问题:

问题1: menuServiece.add()的menu的数据结构必须是和文档一直,要不add会报错;

问题2:如果使用路由复用:reuse-tab切换时,菜单没有随之变化。(路由变化没有触发菜单左侧自定义菜单切换)

  如果需要了解问题2,点击我的随笔:https://www.cnblogs.com/aries-web/p/16362425.html

 
 
 
 
思路二:使用layout-default-nav 13.5.1的版本
 
用法:
 
 
参数:
 
根据文档提示:在layout/default/sidebar中并没有发现

 

 

 
 
posted on 2022-06-02 15:51  努力中的小白羊  阅读(310)  评论(0编辑  收藏  举报