英文:
How to switch off top-item selection for mat-nav-list inside mat-sidenav?
问题
I'm using a fairly straightforward navigation list inside mat-sidenav
, and whenever the sidenav
is shown, it always highlights the top menu item:
<mat-sidenav-container class="example-container">
<mat-sidenav #sidenav mode="over">
<mat-nav-list>
<mat-list-item *ngFor="let i of menuItems" [routerLink]="i.link">
<span matListItemTitle>{{i.title}}</span>
</mat-list-item>
</mat-nav-list>
</mat-sidenav>
<mat-sidenav-content>
side content
</mat-sidenav-content>
</mat-sidenav-container>
I cannot fathom what causes it to highlight the top menu item every time, which makes no sense, as it does not correspond to the currently active URL or anything else.
How to get rid of this odd selection?
My CSS for the component:
.example-container {
position: absolute;
height: calc(100% - 64px);
width: 100%;
}
mat-nav-list {
min-width: 250px;
}
UPDATE
I have found out that if I remove [routerLink]="i.link"
, then it no longer highlights the top item. This tells me that there's some issue mapping to the current root when the menu is activated. The top item is highlighted always, no matter which route is active.
And to make it even more clear, I have added routerLinkActive="active-link"
just to show the abnormality when some route is selected...
mat-list-item.active-link {
background-color: red;
}
Now if I activate route events
, it looks like this:
So we do get the right class added to the active item, and the top item is just always highlighted
I'm using Angular v15.2.7, and latest Chrome.
英文:
I'm using a fairly straightforward navigation list inside mat-sidenav
, and whenever the sidenav
is shown, it always highlights the top menu item:
<mat-sidenav-container class="example-container">
<mat-sidenav #sidenav mode="over">
<mat-nav-list>
<mat-list-item *ngFor="let i of menuItems" [routerLink]="i.link">
<span matListItemTitle>{{i.title}}</span>
</mat-list-item>
</mat-nav-list>
</mat-sidenav>
<mat-sidenav-content>
side content
</mat-sidenav-content>
</mat-sidenav-container>
I cannot fathom what causes it to highlight the top menu item every time, which makes no sense, as it does not correspond to the currently active URL or anything else.
How to get rid of this odd selection?
My CSS for the component:
.example-container {
position: absolute;
height: calc(100% - 64px);
width: 100%;
}
mat-nav-list {
min-width: 250px;
}
UPDATE
I have found out that if I remove [routerLink]="i.link"
, then it no longer highlights the top item. This tells me that there's some issue mapping to the current root when the menu is activated. The top item is highlighted always, no matter which route is active.
And to make it even more clear, I have added routerLinkActive="active-link"
just to show the abnormality when some route is selected...
mat-list-item.active-link {
background-color: red;
}
Now if I activate route events
, it looks like this:
So we do get the right class added to the active item, and the top item is just always highlighted
I'm using Angular v15.2.7, and latest Chrome.
答案1
得分: 1
根据这里所述:
> 当抽屉打开时,抽屉是否应自动聚焦第一个可聚焦的元素。如果模式设置为侧边栏,则默认为false,否则默认为true。
因此,只需向您的侧边栏组件添加autoFocus="false"
:
<mat-sidenav #sidenav mode="over" autoFocus="false">
更新
注意此破坏性更改:
> @breaking-change 14.0.0 从 autoFocus 中移除布尔选项。使用字符串或 AutoFocusTarget
感谢 @vitaly-t 指出并编辑我的原始答案
英文:
as stated here:
> Whether the drawer should focus the first focusable element automatically when opened. Defaults to false in when mode is set to side, otherwise defaults to true.
so, just add autoFocus="false"
to your side-nav component:
<mat-sidenav #sidenav mode="over" autoFocus="false">
UPDATE
be aware of this breaking change:
> @breaking-change 14.0.0 Remove boolean option from autoFocus. Use string or AutoFocusTarget
thanks @vitaly-t for pointing out and editing my original answer
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论