Angular material sidenav 项目在点击后保持焦点
Angular material sidenav item retains focus after click
我有一个如下所示的 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>
我会回答这个问题,以防有人在遇到同样问题时偶然发现这个问题,请将 hasBackDrop 属性添加到 mat-sidenav-container 并将其设置为 false。
...
我有一个如下所示的 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>
我会回答这个问题,以防有人在遇到同样问题时偶然发现这个问题,请将 hasBackDrop 属性添加到 mat-sidenav-container 并将其设置为 false。