Angular 2 Material：sidenav 专注于第一个导航项答案

【问题标题】：Angular 2 Material: sidenav focus on the first navigation itemAngular 2 Material：sidenav 专注于第一个导航项
【发布时间】：2017-07-15 12:11:18
【问题描述】：

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

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

我尝试在sidenav.open() 事件中将focus() 设置为另一个元素，但会出现一秒钟的闪烁效果。

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

【问题讨论】：

标签： angular angular-material

【解决方案1】：

编辑这已在材料库中解决，请参阅@Smiter 的回答。

所以，当mode='side' 时，这似乎是md-sidenav 的错误。 GitHub 上有一些问题未解决（OP，我看到您也提交了自己的问题；干得好）。玩弄它，似乎它实际上与锚标签上的md-button 指令有关。只要md-button 仍然存在，用<button>s 替换<a> 标签也不能解决它。作为进一步的证据，从第一个 <a> 标记中删除 md-button 会导致 第二个 列表项（第一个带有 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

【讨论】：

是的，无高度解决方案解决了这个问题。我想也许我错过了一些东西，但绝对是一个错误。感谢您的支持，希望这个错误很快就会得到修复；）
这个问题现在已经解决，正如其他答案所述。使用它，不再需要此解决方法。

【解决方案2】：

这个问题已经在这个 github issue得到解决

您可以将 false 传递给 autoFocus 属性：

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

【讨论】：

非常适合我，使用 @angular/cdk 7.1.1、@angular/cli 7.1.2、@angular/material 7.1.1。
哇...非常感谢！使用角度 9.x.x。和角材料 9.2.x