angular里使用ng-zorro,怎么实现刷新页面后,左侧对应的路由所属的父级为展开状态

发布于 2022-09-11 18:26:54 字数 683 浏览 31 评论 0

按照官网说明将ng-zorro添加到angular7到项目里,但是使用菜单组件时发现如果是直接点击切换显示是正常的,但是如果页面刷新,访问的是nz-submenu下的子路由,对应的菜单却无法实现展开状态:

<li nz-submenu>
        <span title><i nz-icon type="appstore"></i> 用户管理</span>
        <ul>
          <li nz-menu-item [routerLink]="/user/list" routerLinkActive="ant-menu-item-selected">用户列表</li>
          <li nz-menu-item [routerLink]="/user/pages" routerLinkActive="ant-menu-item-selected">Option 6</li>
        </ul>
</li>

如上结构,如果在/user/list路由下刷新页面,用户管理菜单不会自动被展开。
如果给用户管理添加routerLinkActive="ant-menu-submenu-open",可以让其箭头状态正确,子菜单还是不会显示。
有没有好的处理方法能实现我想实现的效果呢?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(4

梦里°也失望 2022-09-18 18:26:54

评论里回复格式好乱,我又在下面补充一下,我发现如果有多个li标签要声明多个模板变量来进行父结点刷新页面时自动展开,借助isActive根据子节点选中来设置父结点展开[nzOpen],[nzMatchRouter]属性可以让菜单根据路由自动选中


<li nz-submenu [nzOpen]="rla1.isActive" #rla1="routerLinkActive" routerLinkActive>
  <span title><span class="nav-text"> 用户管理</span></span>
  <ul>
    <li nz-menu-item [nzMatchRouter]="true"><a routerLink="/user/list">用户列表</a></li>
  </ul>
</li>
<li nz-submenu [nzOpen]="rla2.isActive" #rla2="routerLinkActive" routerLinkActive>
  <span title><span class="nav-text"> 用户权限</span></span>
  <ul>
    <li nz-menu-item [nzMatchRouter]="true"><a routerLink="/user/role">角色</a></li>
  </ul>
</li>
御守 2022-09-18 18:26:54
    <li
    nz-submenu
    routerLinkActive
    #rla="routerLinkActive"
    [nzOpen]="rla.isActive"
>
临走之时 2022-09-18 18:26:54

我今天也遇到你一样的问题,我审查官网的源代码:
图片描述

发现只要写成如下:<li nz-submenu nzOpen>...</li> 就可以了,对就是加上 nzOpen 就可以了!亲测有效。

箜明 2022-09-18 18:26:54

路由如果没有办法响应的话,估计只有手动检查路由当前路径,然后控制了这个展开状态了。

clipboard.png

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文