如何在 mat-sidenav 内部的 mat-nav-list 中关闭顶部项目选择?

huangapple go评论48阅读模式
英文:

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 如何在 mat-sidenav 内部的 mat-nav-list 中关闭顶部项目选择?


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:

&lt;mat-sidenav-container class=&quot;example-container&quot;&gt;
  &lt;mat-sidenav #sidenav mode=&quot;over&quot;&gt;
    &lt;mat-nav-list&gt;
      &lt;mat-list-item *ngFor=&quot;let i of menuItems&quot; [routerLink]=&quot;i.link&quot;&gt;
        &lt;span matListItemTitle&gt;{{i.title}}&lt;/span&gt;
      &lt;/mat-list-item&gt;
    &lt;/mat-nav-list&gt;
  &lt;/mat-sidenav&gt;
  &lt;mat-sidenav-content&gt;
    side content
  &lt;/mat-sidenav-content&gt;
&lt;/mat-sidenav-container&gt;

如何在 mat-sidenav 内部的 mat-nav-list 中关闭顶部项目选择?

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]=&quot;i.link&quot;, 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=&quot;active-link&quot; 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:

如何在 mat-sidenav 内部的 mat-nav-list 中关闭顶部项目选择?

So we do get the right class added to the active item, and the top item is just always highlighted 如何在 mat-sidenav 内部的 mat-nav-list 中关闭顶部项目选择?


I'm using Angular v15.2.7, and latest Chrome.

答案1

得分: 1

根据这里所述:

> 当抽屉打开时,抽屉是否应自动聚焦第一个可聚焦的元素。如果模式设置为侧边栏,则默认为false,否则默认为true。

因此,只需向您的侧边栏组件添加autoFocus=&quot;false&quot;

&lt;mat-sidenav #sidenav mode=&quot;over&quot; autoFocus=&quot;false&quot;&gt;

更新
注意此破坏性更改

> @breaking-change 14.0.0 从 autoFocus 中移除布尔选项。使用字符串或 AutoFocusTarget

感谢 @vitaly-t 指出并编辑我的原始答案 如何在 mat-sidenav 内部的 mat-nav-list 中关闭顶部项目选择?

英文:

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=&quot;false&quot; to your side-nav component:

&lt;mat-sidenav #sidenav mode=&quot;over&quot; autoFocus=&quot;false&quot;&gt;

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 如何在 mat-sidenav 内部的 mat-nav-list 中关闭顶部项目选择?

huangapple
  • 本文由 发表于 2023年4月17日 03:26:44
  • 转载请务必保留本文链接:https://go.coder-hub.com/76029920.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定