Polymer2.0のダイナミックドロップダウンメニューの実装。 Polymer2.0ではなく、Polymer1.0で動作します

Question

私はPolymer1を使って次のことを行いました。 Polymer2.0で同じ操作を実行しても、buttonの自動ドロップダウンメニューは表示されません。 誰かが私に何をすべきか教えてください。それはShadow DOMと関係があるようです。 Polymer1で

、index.htmlはdom ='shadow'を有し、その代わり<slot>の<content>タグ、それは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

あなたのコード内のいくつかのミスがあります。

1. ハンドルとイベントを発火：

   クリックリスナーは関数内で。それは決して呼び出されません。イベントリスナーをready()またはconnectedCallbackに配置します。方法の詳細については、click hereを参照してください。

2. 設定プロパティ値：

   関数内でプロパティ値を設定し、それを設定しません返します。 this.property = valueを使用し、変更を通知します。 OR、配列/オブジェクトの場合はpolymer array mutation methodsを使用します。

3. paper-menu-buttonのdocumentationを読む：

   代わりにドキュメントのようにclass='dropdown-trigger'使用slotの。

また、Minimal, Complete, and Verifiable exampleを作成してみてください。