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，现在我想知道是否继续忽略错误，因为它工作得很好，或者做点什么（我宁愿这样做，但我不是＆＃39 ;知道从哪里开始戳它以便我可以解决它。）

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()）。

Sidenav抛出异常：评估＆＃34; onShown＆＃34;

1 个答案: