Polymer2.0实现动态下拉菜单。适用于 Polymer1.0 但不适用于 Polymer2.0

Question

我使用 Polymer1 完成了以下操作。在 Polymer2.0 中执行相同操作不会触发 button 的自动下拉菜单。请有人告诉我该怎么做。好像跟Shadow DOM.

有关

在 Polymer1 中，index.html 有 dom ='shadow'，还有一个 <content> 标签而不是 <slot>，它到达 dReadyDynamicRightMenuReady 并触发下拉菜单。但是在Polymer2.0中它也得到了这个功能，并没有触发下拉。

<!-- this is in my-spxl Polymer2.0 -->
<paper-menu-button class="userMenuPositionClass">
<paper-icon-button icon="menu" class="dropdown-trigger"></paper-icon-button>
<paper-dropdown-menu class="dropdown-content">
    <iron-selector selected="[[choice]]" attr-for-selected="mychoice" role="navigation">
       <template id="" is="dom-repeat" items="[[dReadyDynamicRightMenuReady]]" as="menuOption">
           <paper-item>... </paper-item>
       </template>
    </iron-selector>
</paper-dropdown-menu>
</paper-menu-button>

<paper-button class=""> <img on-tap="openRightMenuFromPhoto" src="[[user.photoURL]]"> </paper-button>

脚本： openRightMenuFromPhoto() { var usersMenuButton = this.$.userMenuIconId; usersMenuButton.click(function(event) { dReadyDynamicRightMenuReady = [ { "myChoice": "spx21", "myHref": "/spx21", "myOptionValue": "chats" } ]; return dReadyDynamicRightMenuReady; }) }

Answer 1

你的代码有几个错误：

处理和触发事件：

点击侦听器在一个函数内。那永远不会被调用。将事件侦听器放在 ready() 或 connectedCallback 上。有关如何执行此操作的更多信息 click here。
设置属性值：

在函数内部设置属性值并返回它不会设置它。采用 this.property = value 并通知更改。或者，如果它是 array/object 使用 polymer array mutation methods.
阅读paper-menu-button的documentation:

而不是 class='dropdown-trigger'，使用文档中的 slot。

此外，尝试创建一个 Minimal, Complete, and Verifiable example。

Polymer2.0实现动态下拉菜单。适用于 Polymer1.0 但不适用于 Polymer2.0

Implementing dynamic dropdown menu in Polymer2.0. Works in Polymer1.0 but not in Polymer2.0

polymer-1.0

shadow-dom

polymer-2.x

polymer-starter-kit