Angular 2材质 - Sidenav和工具栏按钮自动高亮

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

当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

来源

2017-02-21 Androidian

嗨@Androidian你有没有想出解决办法？我也有同样的问题。 – Clark

可以使用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折旧。上面的代码已更新。

来源

2017-09-22 09:58:34 Clark

我试过另一种解决方案，它工作。
据我了解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>

希望这会帮助

来源

2017-12-10 19:18:41 Diogen737

Angular 2材质 - Sidenav和工具栏按钮自动高亮

回答

相关问题