html - Angular MatMenu : highlighting active item

Question

我想突出显示 MenuItem 中当前处于事件状态的元素，即用户当前所在的元素。

例如:我正在导航到个人资料页面。然后我希望突出显示该菜单项。我已经用一些 HTML 和 TypeScript 尝试过，但不知何故它出现了 hell 般的错误:

StackBlitz:https://stackblitz.com/edit/angular-vgp585

HTML:

 <mat-toolbar color="primary" style="height:67px;">
   <mat-menu #menu="matMenu">
     <button mat-menu-item id="settings" *ngIf="authenticationService.currentUserValue" [routerLink]="['/settings']"
       (click)="setActiveItem('settings')">
       <mat-icon [ngStyle]="{'color' : activeItem===settings ? 'blue' : 'rgba(0,0,0,.54)' }">settings</mat-icon>
       <span
         [ngStyle]="{'font-weight': activeItem===settings ? 'bold' : 'normal' }">{{ 'HEADER.SETTINGS' | translate }}</span>
     </button>
     <button mat-menu-item *ngIf="authenticationService.currentUserValue" [routerLink]="['/profile']"
       (click)="setActiveItem('profile')">
       <fa-icon [icon]="['fas', 'address-card']"
         [ngStyle]="{'color' : activeItem===profile ? 'blue' : 'rgba(0,0,0,.54)' }" class="font-awesome" size="lg">
       </fa-icon>
       <span
         [ngStyle]="{'font-weight': activeItem===profile ? 'bold' : 'normal' }">{{ 'HEADER.PROFILE' | translate }}</span>
     </button>
     <button mat-menu-item *ngIf="authenticationService.currentUserValue" [matMenuTriggerFor]="subMenu">
       <mat-icon>language</mat-icon>
       <span>{{ 'HEADER.LANGUAGE' | translate }}</span>
     </button>
     <button mat-menu-item>
       <mat-icon>notifications_off</mat-icon>
       <span>{{ 'HEADER.DISABLEALERTS' | translate }}</span>
     </button>
     <button mat-menu-item (click)="logout()" [routerLink]="['/chat']">
       <fa-icon style="color: rgba(0,0,0,.54)" [icon]="['fas', 'sign-out-alt']" class="font-awesome" size="lg"></fa-icon>
       <span>{{ 'HEADER.LOGOUT' | translate }}</span>
     </button>
   </mat-menu>
   <mat-menu #subMenu="matMenu" [overlapTrigger]="false">
     <button mat-menu-item [ngStyle]="{'color':lang === translate.currentLang ? 'blue' : 'black' }"
       *ngFor="let lang of translate.getLangs()" (click)="translate.use(lang)">{{ lang }}</button>
   </mat-menu>
 </mat-toolbar>

TypeScript:

   activeItem: string;
 
   setActiveItem(page: string) {
     this.activeItem = page;
   }

有没有可能用一些 CSS 之类的东西来做到这一点？我真的不知道为什么这不起作用。

这就是按下任何按钮之前的样子

按下两个按钮之一后，两者都会更改为该按钮

Answer 1

你自己就快到了...我必须在 [ngStyle] 中的条件周围加上引号才能让你的代码正常工作

相关HTML:

<mat-toolbar color="primary" style="height:67px;">
    MatMenuStyle
    <button mat-fab [matMenuTriggerFor]="menu" >
    <fa-icon [icon]="['fas', 'address-card']"
       class="font-awesome" size="lg">
        </fa-icon>
  </button>

  <mat-menu #menu="matMenu">
    <button mat-menu-item id="settings"
      (click)="setActiveItem('settings')">
            <fa-icon [icon]="['fas', 'cog']"
        [ngStyle]="{'color' : activeItem==='settings' ? 'blue' : 'rgba(0,0,0,.54)' }" class="font-awesome" size="lg">
      </fa-icon>
      <span
        [ngStyle]="{'font-weight': activeItem===settings ? 'bold' : 'normal' }"> SETTINGS</span>
    </button>
    <button mat-menu-item 
      (click)="setActiveItem('profile')">
      <fa-icon [icon]="['fas', 'address-card']"
        [ngStyle]="{'color' : activeItem==='profile' ? 'blue' : 'rgba(0,0,0,.54)' }" class="font-awesome" size="lg">
      </fa-icon>
      <span
        [ngStyle]="{'font-weight': activeItem===profile ? 'bold' : 'normal' }">PROFILE</span>
    </button>
  </mat-menu>
</mat-toolbar>

完成working stackblitz here