Question

当我尝试在“登录”页面中隐藏抽屉时，会出现错误。我使用dom-if隐藏了菜单栏，根据syntax我使用了<template>标签。但它会发生错误。

聚合物代码

<!-- Drawer content -->
<template is="dom-if" if="[[_isLogin()]]">
  <app-drawer id="drawer" slot="drawer" swipe-open="[[narrow]]">
    <app-toolbar>Menu</app-toolbar>
    <iron-selector selected="[[page]]" attr-for-selected="name" class="drawer-list" role="navigation">
      <a name="homepage" href="[[rootPath]]homepage">Homepage</a>
      <a name="profile" href="[[rootPath]]profile">Profile</a>
      <a name="temp" href="[[rootPath]]temp">Temp</a>
    </iron-selector>
  </app-drawer>
</template>

脚本

_routePageChanged(page) {
  if(this._isLogin()) {
      // If no page was found in the route data, page will be an empty string.
      // Default to 'homepage' in that case.
      this.page = page || 'homepage';

      // Close a non-persistent drawer when the page & route are changed.
      if (!this.$.drawer.persistent) {
          this.$.drawer.close();
      }
  } else {
      this.page = 'login';
  }
}

注意：_isLogin()在那里，它会返回true或false

Answer 1

正如您在文档here中看到的那样，＆＃34; 节点使用数据绑定创建动态（包括dom-repeat和 dom-中的那些如果模板）没有添加到此。$ hash ＆＃34;

因此，由于该元素位于dom-if中，因此您无法使用此＆＃34;快捷方式＆＃34;得到它的参考。因此，您必须坚持使用旧的＆＃34; getElementById，同时请记住，您不是在查询文档，而是使用本地阴影dom。所以这个：

  if (!this.$.drawer.persistent) {
      this.$.drawer.close();
  }

可能会变成：

  var drawer = this.shadowRoot.getElementById('drawer');
  if (drawer.persistent) {
    drawer.close();
  }

更新：既然你说它仍然没有用，我想我应该提一下你需要考虑的另一件事。在您的代码中，显示该元素和查询它的条件是相同的，由_isLogin方法返回。

说实话，我不知道我要建议的是原因或推荐的解决方案，但我认为你应该花时间将元素实际标记到页面中以便能够查询为它（解决单个执行线程和类似的东西）。因此，作为解决方法，您可以将代码包装在setTimeout回调中，如下所示：

setTimeout(() => {
  var drawer = this.shadowRoot.getElementById('drawer');
  if (drawer.persistent) {
    drawer.close();
  }
});

由于未提供第二个参数，即超时，您基本上会说＆＃34; 尽快执行此操作，但现在不能＆＃34;。< / p>

Polymer：Uncaught TypeError：无法读取未定义的属性'persistent'

1 个答案: