聚合物纸抽屉面板不接受来自孩子的切换答案

【问题标题】：Polymer paper-drawer-panel not accepting toggle from child聚合物纸抽屉面板不接受来自孩子的切换
【发布时间】：2017-05-02 16:44:58
【问题描述】：

我在一个元素中有一个paper-drawer-panel，在一个子元素中有一个工具栏。工具栏上有一个菜单按钮，它应该切换抽屉面板，但它没有。如何告诉paper-drawer-panel 接受来自子元素的命令？

父元素：

<dom-module id="nav-drawer">
<template>
   <paper-drawer-panel drawerFocusSelector="">
      <div drawer id="drawerbox">
         Contents of drawer panel here.
      </div>
      <div main>
         <tool-bar></tool-bar>
      </div>
   <paper-drawer-panel>
</template>
</dom-module>

子元素：

<dom-module id="tool-bar">
  <template>
    <paper-toolbar>
      <paper-icon-button icon="menu" paper-drawer-toggle></paper-icon-button>
    </paper-toolbar>
  </template>
</dom-module>

感谢您的帮助。我是 Polymer 的新手。

【问题讨论】：

上述解决方案仅适用于打开抽屉面板。打开时，在我看来，它会覆盖菜单按钮，因此只需单击它旁边的按钮即可关闭。如果你也想通过菜单按钮关闭它，你需要确保它通过togdraw:"main"。

标签： polymer paper-elements

【解决方案1】：

我自己找到了答案：我将tool-bar 元素更改如下，添加attributes 和on-tap 函数。

<dom-module id="tool-bar" attributes="togdraw">
  <template>
    <paper-toolbar>
      <paper-icon-button icon="menu" on-tap="toggleDrawer"></paper-icon-button>
    </paper-toolbar>
  </template>
<script>
.....
      toggleDrawer: function() {
        this.fire('eventFromChild',{togdraw:"drawer"});
      }
....
</script>

</dom-module>

我相应地更改了nav-drawer：

<dom-module id="nav-drawer">
<template>
   <paper-drawer-panel drawerFocusSelector="" selected="{{selectPanel}}">
      <div drawer id="drawerbox">
         Contents of drawer panel here.
      </div>
      <div main>
         <tool-bar></tool-bar>
      </div>
   <paper-drawer-panel>
</template>
<script>
....
  properties: {
      selectPanel: String
  },
  ready: function() {
    this.addEventListener('eventFromChild', this.toggleDrawer);
  },
  toggleDrawer: function(event,selectPanel) {
    this.selectPanel = event.detail.togdraw;
    return selectPanel;
  }
....
</script>
</dom-module>

【讨论】：