Question

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

preventDefault
[autoFocus] =“ false”

没有工作

<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。

...

单击后角材料sidenav项保持焦点

1 个答案: