Angular根据用户角色控制侧边菜单的显示与隐藏

根据你的需求，我们可以通过两种方式实现菜单的条件显示：直接在模板中用*ngIf控制，或者在组件内预处理菜单数据。

方法一：模板内直接控制显示 #

直接在现有模板的对应元素上添加*ngIf判断，根据用户角色过滤菜单：

修改后的模板代码：

<ul class="sidebar-menu collapsible collapsible-accordion" data-collapsible="accordion">
  <ng-container>
    <!-- 父菜单：角色为2时隐藏Prepaid -->
    <li *ngFor="let parentMenu of sideMenuResponse" class="no-padding"
        *ngIf="!(parentMenu.title === 'Prepaid' && userRoles.includes(2))">
      <a class="collapsible-header">
        <i class="material-icons"></i> {{parentMenu.title}}
        <i class="nav-drop-icon material-icons">keyboard_arrow_right</i>
      </a>
      <div class="collapsible-body">
        <ul *ngFor="let submenu of parentMenu.subMenu">
          <!-- 子菜单：角色为1时隐藏Initiate -->
          <li *ngIf="!(submenu.subMenu1 === 'Initiate' && userRoles.includes(1))">
            <a target="_self" [routerLink]="">
              {{submenu.subMenu1}}
            </a>
          </li>
        </ul>
      </div>
    </li>
  </ng-container>
</ul>

逻辑说明 #

• 父菜单判断：当父菜单标题为Prepaid且用户角色包含2时，隐藏该父菜单
• 子菜单判断：当子菜单标题为Initiate且用户角色包含1时，隐藏该子菜单

方法二：组件内预处理菜单数据 #

如果菜单结构复杂，推荐在组件中先过滤好符合权限的菜单数据，再传递给模板渲染，这样模板更简洁：

组件代码示例（假设你在获取服务器响应后处理）：

// 假设已获取服务器返回的menu数据并赋值给sideMenuResponse
this.sideMenuResponse = this.sideMenuResponse.filter(parentMenu => {
  // 过滤Prepaid父菜单：角色为2时排除
  if (parentMenu.title === 'Prepaid' && this.userRoles.includes(2)) {
    return false;
  }
  // 过滤Initiate子菜单：角色为1时移除
  parentMenu.subMenu = parentMenu.subMenu.filter(submenu => {
    return !(submenu.subMenu1 === 'Initiate' && this.userRoles.includes(1));
  });
  // 可选：如果父菜单过滤后没有子菜单，也可以选择隐藏父菜单
  // return parentMenu.subMenu.length > 0;
  return true;
});

此时模板无需修改，直接使用处理后的sideMenuResponse即可。

内容的提问来源于stack exchange，提问作者vishnu