Angular material sidenav 项目在点击后保持焦点

Question

我有一个如下所示的 material 菜单 sidenav，每次我点击一个菜单项时，其他菜单项变得不可点击，直到我在导航栏外点击，悬停或点击效果才起作用。我尝试过以下解决方案：

防止默认
[自动对焦]="假"

none 有效

<mat-sidenav [autoFocus]="false" #sidenav [(opened)]="fullScreen" mode="side" class="fullScreen nav-bar" role="navigation">
  <div *ngIf="fullScreen" fxLayoutAlign="center center" class="logo">

  </div>
  <div *ngIf="!fullScreen" fxLayoutAlign="center center" class="logo">

  </div>
  <div class="scrollable">
    <mat-nav-list class="navigation-list mb-1" *ngFor="let item of menus">
      <a mat-list-item id="myNav" class="navigation-item" routerLinkActive="menu-active" [routerLink]="[item.route]" [matMenuTriggerFor]="main_menu" (click)="smallScreenToggle()">
        <mat-icon>{{item.icon}}</mat-icon>
        <span class="navigation-item-label ml-3">{{item.name}}
        </span>
        <span *ngIf="item.children">
          <mat-icon class="mySelect menu-select">arrow_drop_down</mat-icon>
        </span>
        <mat-menu #main_menu="matMenu" [class]="!item.children ? 'customClass' : ''">
          <ng-container *ngFor="let subItem of item['children']">
            <button mat-menu-item [routerLink]="[subItem.route]">{{ subItem.name }}</button>
          </ng-container>
        </mat-menu>
      </a>
    </mat-nav-list>


    <button mat-raised-button class="supportButton" [routerLink]="['/support']">
        Support
      </button>
  </div>



</mat-sidenav>

Answer 1

我会回答这个问题，以防有人在遇到同样问题时偶然发现这个问题，请将 hasBackDrop 属性添加到 mat-sidenav-container 并将其设置为 false。

...

Angular material sidenav 项目在点击后保持焦点

Angular material sidenav item retains focus after click

javascript

angular

angular-material

angular-material2

angular9