Angular 2 Material - Sidenav 和工具栏按钮自动突出显示答案

【问题标题】：Angular 2 Material - Sidenav and Toolbar buttons are highlighed automaticallyAngular 2 Material - Sidenav 和工具栏按钮自动突出显示
【发布时间】：2017-02-21 11:52:29
【问题描述】：

我正在使用 material2 库开发 Angular 2 应用程序，但工具栏和 Sidenav 中的按钮（md 按钮）存在一些 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>

这是一个显示问题的 pluker -> https://plnkr.co/edit/ve5Ez0WSinNyowxI46LO?p=preview

【问题讨论】：

嗨@Androidian 你有没有想过这个？我也有同样的烦恼。

标签： angular angular-material2

【解决方案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 已折旧。以上代码已更新。

【讨论】：

【解决方案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>

希望这会有所帮助

【讨论】：