Question

我正在使用 material2 库开发一个Angular 2应用程序，但工具栏和Sidenav中的按钮（md-button）存在一些UI问题。

当sidenav打开并且用户将光标移动到其中一个按钮上时，第一个按钮总是自动高亮显示。

此外，当sidenav关闭时，工具栏上的菜单按钮会自动突出显示，直到用户点击其他位置。

这是我的布局：

<md-sidenav-container fullscreen>
<md-sidenav #sidenav mode="over"> <!-- mode="over/side/push" --> <!-- (open)="" -->
    <button md-button class="sidenav-link" [routerLink]="['/home']" (click)="sidenav.close()">HOME</button>
    <button md-button class="sidenav-link" [routerLink]="['/about']" (click)="sidenav.close()">ABOUT</button>
</md-sidenav>

<md-toolbar>
    <button md-button class="toolbar-menu-button" (click)="sidenav.toggle()"><i class="material-icons md-dark">menu</i></button>
    <span class="toolbar-spacer"></span>
    <button md-button class="toolbar-link" [routerLink]="['/home']" [routerLinkActive]="['link-active']">HOME</button>
    <button md-button class="toolbar-link" [routerLink]="['/about']" [routerLinkActive]="['link-active']">ABOUT</button>
    <span class="toolbar-spacer"></span>
</md-toolbar>

<div class="page-content">
    <router-outlet></router-outlet>
</div>

这是一个显示问题的插件 - ＆gt; https://plnkr.co/edit/ve5Ez0WSinNyowxI46LO?p=preview

Answer 1

您可以在所选项目上使用cdk-focus-region-start属性。

例如一个非常难看的最小例子：

<a #rla="routerLinkActive" [attr.cdk-focus-region-start]="rla.isActive ? '' : null">Home</a>

完整的链接：

<a md-list-item 
   [routerLink]="['/home']" 
   #rla="routerLinkActive" 
   [attr.cdk-focus-region-start]="rla.isActive ? '' : null" 
   [routerLinkActive]="['active']"
   [routerLinkActiveOptions]="{exact: true}">Home</a>

当您打开菜单而不是顶部菜单时，这会将焦点设置为当前选定的项目。

信息很少，但发现了on github

编辑：

使用cdk-focus-region-start，因为cdk-focus-start已弃用。上面的代码已更新。

Answer 2

我尝试了另一种解决方案并且有效据我所知routerLinkActive允许为活动锚标签设置任意类，所以我刚刚添加：

<mat-sidenav>
  <mat-nav-list>
    <a mat-list-item cdk-focus-region-start routerLinkActive="mat-list-item-focus" routerLink="/profile">
        ...
    </a>
  </mat-nav-list>
</mat-sidenav>

希望这有帮助

Angular 2 Material - Sidenav和Toolbar按钮自动高亮显示

2 个答案: