app-router 要素を使用して画面上のコンポーネントを置き換えようとしていますが、何もレンダリングされません。以下、詳細です。
「 my-element.html 」には 2 つの主要な要素があります。1 つはサイドバーで、もう 1 つはメインパネルです。ルートに基づいて、メイン パネルを適切な要素に置き換えたい。ただし、要素をレンダリングするのではなく、URL を変更します。
助けてください
my-element.html
<dom-module id ="my-element">
<template>
<paper-drawer-panel id="drawerpanel">
<aq-sidebar></aq-sidebar>
<app-router div="app-router" mode="hash">
<app-route path="/editor" import="../layouts/editor.html"></app-route>
<app-route path="/analyze" import="../layouts/analyze.html"></app-route>
<app-route path="/community" import="../layouts/community.html"></app-route>
</app-router>
</paper-drawer-panel>
</template>
<script>
Polymer({ is:'my-element',
listeners: {'change-menu': 'menuChanged',},
menuChanged(newMenu) { this.$$('app-router').go("/editor", {replace:true});}
})
</script> </dom-module>
aq-sidebar.html
<dom-module id='aq-sidebar'>
<template>
<paper-header-panel class='sidenav fit'>
<paper-toolbar>
<div class="title">AimsQuant</div>
<paper-icon-button icon="icons:menu" on-tap="toggleMenu"></paper-icon-button>
</paper-toolbar>
<paper-menu attrForSelected="data-panel" iron-select="onSelected">
<paper-icon-item noink data-panel="editor">
<iron-icon item-icon icon="vaadin-icons:twin-col-select"></iron-icon>
<span class="item-text">Editor</span>
<!--a is="pushstate-anchor" href="#/editor"></a-->
</paper-icon-item>
<paper-icon-item data-panel="analyze">
<iron-icon item-icon icon="vaadin-icons:chart"></iron-icon>
<span class="item-text">Analyze</span>
</paper-icon-item>
<script> Polymer({
is: 'aq-sidebar',
listeners: {
'iron-select': 'onSelected',
},
onSelected() {
this.fire('change-menu', {menu : this.menuSelected})
},
});
</script>
</dom-module>