javascript - Sidenav 抛出异常 : Error during evaluation of "onShown"

Question

我使用这个侧导航

<div layout="column" style="height:60px;">
<md-sidenav-container layout="row" flex>
<md-content flex layout-padding>
  <div layout="column" layout-fill layout-align="top right" style="width: 50px; position: absolute;
top: -8px;
right: 55px;
font-size: 18px;">
    <button md-raised-button (click)="open('right')" [hidden]="rightOpened" class="md-primary">
      Filtros
    </button>
  </div>
  <div flex></div>
</md-content>
<md-sidenav name="right" align="right" layout="column" (onShown)="input.focus()">
  <md-toolbar class="md-theme-light">
    <h1 class="md-toolbar-tools">Sidenav Right</h1>
  </md-toolbar>

之后我调用不同的组件。我刚刚学会了如何使用开发人员工具来查看错误和警告，所以我是个新手，但我不记得它很久以前就抛出了，在我实现了很多更改之前。

问题是我不太了解这个错误:

EXCEPTION: Error during evaluation of "onShown"

...

ORIGINAL EXCEPTION: TypeError: Cannot read property 'focus' of undefined

...

TypeError: Cannot read property 'focus' of undefined
    at AbstractChangeDetector.ChangeDetector_SidenavBasicUsage_0.handleEventInternal (viewFactory_SidenavBasicUsage:361:24)
    at AbstractChangeDetector.handleEvent

因为我没有看到这与我的代码有什么关系。我已经完成了，可以说，我相信来自materializecss，现在我想知道是否继续忽略该错误，因为它工作得很好，或者对此做一些事情(我宁愿这样做，但我不知道在哪里开始戳它，这样我就可以修复它)。

Answer 1

正如评论中提到的，有一个 HTML 片段:

<md-sidenav name="right" align="right" layout="column" (onShown)="input.focus()">

问题出在 (onShown)="input.focus()" 上。该代码可能来自某种示例。通常，这种类型的焦点显示的目的是当侧边导航变得可见时，将焦点集中在侧边导航内部的元素上。这样做通常是为了键盘用户的易用性和可访问性的原因(视障人士可能不知道刚刚出现的侧边导航)。

但是，问题可能是您没有任何名为 input 的变量。如果您想要一个名为 input 的变量并希望它能够聚焦，那么可以采用几种不同的方法来完成，但我们没有足够的代码来告诉您想要做什么。一个常见的例子可能看起来像......

<md-sidenav name="right" align="right" layout="column" (onShown)="input.focus()">
  <input #input type="text" class="search"/>
</md-sidenav>

请注意，#input 声明了一个名为 input 的模板引用变量，可以在模板中的其他位置引用该变量(例如 input.focus())。