聚合物两个抽屉内部组件

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 中引用该组件，我会收到以下错误：

未捕获类型错误：无法读取属性 'toggle' of null

任何人都可以解释一下吗？

注意：此错误发生在 Chrome 而不是 Safari。还没有测试任何其他东西。

Answer 1

发生这种情况是因为在组件代码中 document.getElementById 不会按预期工作。你有没有启用 Shadow DOM？

你应该使用 Polymer's event binding syntax and get the element using the 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>

聚合物两个抽屉内部组件

Polymer two drawer inside component

polymer

polymer-1.0