Sidenav 抛出异常：评估“onShown”时出错

Question

我用这个sidenav

<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

正如 cmets 所说，您的 HTML 有一个 sn-p：

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

问题在于(onShown)="input.focus()"。此代码可能来自某种示例。通常，这种聚焦显示的目的是在 sidenav 变得可见时聚焦在 sidenav 内部的元素上。这样做通常是为了便于键盘用户使用和出于可访问性的原因（视力受损的人可能不知道刚刚出现的 sidenav）。

但是，问题可能在于您没有任何名为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()）。