Angular MatMenu：突出显示活动项目答案

【问题标题】：Angular MatMenu: highlighting active itemAngular MatMenu：突出显示活动项目
【发布时间】：2019-11-04 19:10:54
【问题描述】：

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

例如：我正在导航到个人资料页面。然后我希望突出显示此菜单条目。我已经用一些 HTML 和 TypeScript 进行了尝试，但不知怎的，它的 bug 就像地狱一样：

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 或其他东西来做到这一点？我真的不知道为什么这不起作用。

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

按下两个按钮中的一个后，都会更改为那个

【问题讨论】：

我刚刚查看了文档并找到了一种更好的方法，如果您正在使用此链接导航并想显示哪个链接是打开的！ angular.io/api/router/RouterLinkActive。只需使用这个：<a routerLink="/user/bob" routerLinkActive #rla="routerLinkActive"> Bob {{ rla.isActive ? '(already open)' : ''}} </a>

标签： html css angular typescript angular-material

【解决方案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

【讨论】：