登錄后限制對選單的訪問

在邊欄中，我有 4 個標題（Administration、Marché、Portefeuille、Déconnexion）。

當用戶登錄時，我希望Portefeuille隱藏標題。

我創建了一個方法：

canAccess(id: string): boolean {

    if (id === "Portefeuille") {

      if (this.store.selectSnapshot(ProfileState.currentPortfolio)) {
        return true;
      } else {
        return false;
      }
    } 
    return true;
  }

打字稿檔案

export class OnlineComponent implements OnInit {

  private unsubscribe$ = new Subject<void>();

  @Select(AuthState.user) user$!: Observable<string>;
  @Select(AuthState.lastConnexionMoment) lastConnexionMoment$!: Observable<ApiConnectionMoment>;
  @Select(ProfileState.currentPortfolio) currentPortfolio$!: Observable<Portfolio>;

  activeItem: any;
  openSidebar: boolean = true;


  menuSidebar: MenuSidebar[] = [
    {
      link_name: 'Administration',
      id: 'administration',
      link: null,
      icon: 'bx bx-collection',
      active: false,
      sub_menu: [
        {
          link_name: 'Sélection d\'un protefeuille',
          link: '/administrations/select-portfolio', 
        },
      ],
    },

    {
      link_name: 'Marchés',
      id: 'market',
      link: null,
      icon: 'bx bx-line-chart', 
      active: false,
      sub_menu: [
        {
          link_name: 'Valeurs',
          link: '/markets/stocks',
        },
        {
          link_name: 'Devise',
          link: '/markets/currencies',
        },
        
      ],
    },

    {
      link_name: 'Portefeuille',
      id: 'portefeuille',
      link: null,
      icon: 'bx bx-line-chart', 
      active: false,
      sub_menu: [
        {
          link_name: 'Titre en portefeuille',
          link: '/portfolio/stocks',
        },
       
      ],
    },

  ];

  constructor(
    private store: Store,
    private sandbox: OnlineSandbox) { }

  ngOnInit() {
  }

  showSubmenu(item: any) {
    if (item.link_name == this.activeItem) {
      this.activeItem = undefined;
    } else {
      this.activeItem = item.link_name;
    }
  }

  selectMenu(parentMenu: { link_name: string }): void {
    this.menuSidebar.forEach((menu) => {
      if (menu.link_name !== parentMenu.link_name) {
        menu.active = false;
      } else {
        menu.active = !menu.active;
      }
    });
  }

  signOut(): void {
    this.unsubscribe$.next();
    this.sandbox.signOut()
      .pipe(
        takeUntil(this.unsubscribe$)
      ).subscribe( res => {   } );
  }


  canAccess(id: string): boolean {

    if (id === "Portefeuille") {

      if (this.store.selectSnapshot(ProfileState.currentPortfolio)) {
        return true;
      } else {
        return false;
      }
    } 
    return true;
  }

}

我不知道我應該在哪里/如何canAccess在 html 中嵌入該方法？

網頁格式

<ul class="nav-links" id="nav-links">
   <li *ngFor="let item of menuSidebar" [class.showMenu]="activeItem == item.link_name" #itemEl>
   <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>
         <!-- Déconnexion -->
         <span class="link_logout ">Déconnexion</span>
      </a>
   </li>
</ul>

選單邊欄

export type MenuSidebar = {
  link_name: string; 
  id: string,
  link: null;
  icon: string;
  active: boolean; 
  sub_menu: {
      link_name: string; 
      link: string;
  }[]
}

uj5u.com熱心網友回復：

<ul class="nav-links" id="nav-links">
<ng-container  *ngFor="let item of menuSidebar"   >
 <li  [class.showMenu]="activeItem == item.link_name" #itemEl *ngIf="this.canAccess(item.line_name)">
   <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>
</ng-container>
  
   <li class="dropdown-title"  >
      <a href="#" (click)="signOut()">
         <i class="bx bx-log-out"></i>
         <!-- Déconnexion -->
         <span class="link_logout ">Déconnexion</span>
      </a>
   </li>
</ul>

可能是代碼幫助你......

uj5u.com熱心網友回復：

嘗試：

  <li *ngFor="let item_sub of item.sub_menu" [hidden]="canAccess(item_sub)" routerLinkActive="active">
     <a [routerLink]="[item_sub.link]">{{ item_sub.link_name }}</a>
  </li>

標籤：有角度的

上一篇：有角度的Ngrx

下一篇：角度材料多選復選框當前值無法獲取