Question

我正在使用此处找到的两个抽屉的示例代码。

<app-drawer-layout>

  <app-drawer swipe-open></app-drawer>

  <app-drawer id="endDrawer" align="end" swipe-open></app-drawer>

  <app-toolbar>
    <paper-icon-button icon="menu" drawer-toggle></paper-icon-button>
    <div main-title></div>
    <paper-icon-button icon="info" onclick="document.getElementById('endDrawer').toggle();"></paper-icon-button>
  </app-toolbar>

  <sample-content size="100"></sample-content>

</app-drawer-layout>

如果我将代码放在index.html中，但是如果我将它放在一个组件中，然后在index.html中引用该组件，则会出现以下错误：

未捕获的TypeError：无法读取null的属性'toggle'

任何人都可以对此有所了解吗？

注意：此错误发生在Chrome中，但不会发生在Safari中。没有测试任何其他东西。

Answer 1

这是因为在组件代码中，document.getElementById将无法按预期工作。你有机会启用Shadow DOM吗？

您应该使用Polymer's event binding syntax并使用node finding feature获取元素。

<dom-module id="my-app">
  </template>
    <paper-icon-button icon="info" on-tap="toggleEndDrawer"></paper-icon-button>
  </template>
</dom-module>

<script>
  Polymer({
    is: 'my-app',

    toggleEndDrawer: function() {
      this.$.endDrawer.toggle();
    }
</script>

聚合物两个抽屉内部组件

1 个答案: