登录后隐藏侧边栏Portefeuille菜单：canAccess方法的HTML嵌入问题

1. 修正权限判断的匹配问题 #

你的canAccess方法中判断的是id === "Portefeuille"，但菜单数据里Portefeuille的id是小写的"portefeuille"，大小写不匹配会导致判断失效。先修正canAccess方法：

canAccess(menuId: string): boolean {
  if (menuId === "portefeuille") {
    // 用!!将快照值转为布尔值，简化空值判断
    return !!this.store.selectSnapshot(ProfileState.currentPortfolio);
  } 
  return true;
}

2. 在HTML模板中嵌入权限控制 #

在循环渲染菜单的<li>元素上添加*ngIf指令，调用canAccess方法并传入当前菜单的id，Angular会自动根据返回值控制菜单的显示/隐藏：

<ul class="nav-links" id="nav-links">
   <!-- 添加*ngIf="canAccess(item.id)"控制菜单显示 -->
   <li *ngFor="let item of menuSidebar" 
       [class.showMenu]="activeItem == item.link_name" 
       #itemEl
       *ngIf="canAccess(item.id)">
   <div *ngIf="item.sub_menu.length > 0" class="dropdown-title" (click)="showSubmenu(item)">
   <a (click)="selectMenu(item)">
   <i [class]="item.icon"></i>
   <span class="link_name">{{ item.link_name }}</span>
   </a>
   <i class="bx bxs-chevron-down arrow"></i>
   </div>
   <ul class="sub-menu" [class.blank]="item.sub_menu.length == 0">
      <li>
         <a class="link_name">{{ item.link_name }}</a>
      </li>
      <li *ngFor="let item_sub of item.sub_menu" routerLinkActive="active">
         <a [routerLink]="[item_sub.link]">{{ item_sub.link_name }}</a>
      </li>
   </ul>
   </li>
   <li class="dropdown-title">
      <a href="#" (click)="signOut()">
         <i class="bx bx-log-out"></i>
         <span class="link_logout ">Déconnexion</span>
      </a>
   </li>
</ul>

说明 #

• 每次Angular触发变更检测时，都会调用canAccess方法检查当前菜单的权限状态，确保菜单显示逻辑实时更新。
• 如果需要基于菜单名称而非id判断，只需将canAccess(item.id)改为canAccess(item.link_name)，同时保持方法内的判断条件为menuName === "Portefeuille"即可。

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