ng-alain自定义menu
菜单使用的是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中并没有发现