Question

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

例如：我正在导航到个人资料页面。然后，我希望此菜单项突出显示。我已经用一些HTML和TypeScript尝试过它，但是以某种方式它会像地狱一样出错：

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

Angular MatMenu：突出显示活动项

1 个答案: