Angular 2材质:sidenav专注于第一个导航项目

Question

我正在使用Angular 2 Material,我在sidenav组件中导航时遇到问题.每当我打开sidenav时,它会自动将焦点设置到第一个md-button项目,并且在我点击屏幕上的某个位置之前不会消失.

这是一个例子:https://plnkr.co/edit/pNv9Bx4o1qQSF2bpOqyM?p=preview

我试图focus()在sidenav.open()事件上设置另一个元素但是闪烁效果会出现一秒钟.

是否有任何选项或属性可以禁用此初始焦点到第一个菜单项？

Answer 1

这已经解决了这个github 问题

您只需将false传递给autoFocus属性:

<mat-sidenav [autoFocus]="false">
    ...
</mat-sidenav>

Answer 2

所以,这似乎是一个错误的md-sidenav时候mode='side'.在GitHub上有一些问题(OP,我看到你提交了自己的问题;好的工作).玩弄它,似乎它实际上与md-button锚标签上的指令有关.只要仍然存在,<a>用<button>s 替换标签也无法解决问题md-button.作为进一步的证据,md-button从第一个<a>标记中删除导致第二个列表项(带有a的第一个元素md-button)以这种方式突出显示自己.

无论如何,我认为解决这个问题的最佳方法是在我们收到Angular团队的消息之前采取一种解决方法.我能够通过在列表中添加第一个不可见的列表项来修复行为md-button:

  <md-sidenav #sidenav class="example-sidenav">

    <a md-button style="height: 0; position: absolute;"> <!-- 'absorbs' the behavior -->
    </a>  

    <md-list>

      <md-list-item>
        <a (click)="sidenav.close()" md-button>
          <md-icon>directions_car</md-icon>
        </a>
      </md-list-item>
      ......
    </md-list>
  </md-sidenav>

注意,我们不能设置display: none虚拟元素; 该指令会忽略它.只是使用height: 0或类似的东西.我也position: absolute这样设置它并没有弄乱其他元素的定位.

编辑:这是问题所在.根据一位合作者的说法,这是按预期工作的？请注意 - 如果确实如此,则需要将其作为功能请求提交,因为这会让用户感到困惑. https://github.com/angular/material2/issues/3215