App-Router "Go" ist nicht Rendering: Polymer

Question

Ich versuche, eine Komponente auf dem Bildschirm mit app-Router-Element zu ersetzen, aber es nichts rendern. Unten sind die Details.

Es gibt zwei Hauptelemente in "my-element.html". Eine ist die Seitenleiste und die andere ist das Hauptfenster. Ich möchte das Hauptfenster durch ein entsprechendes Element basierend auf der Route ersetzen. Es wird jedoch kein Element gerendert, sondern die URL geändert.

Bitte helfen

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-seitenleiste.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> 

Answer 1

Zuerst dieser Import-Stil ist seltsam, Ich denke das Wenn Sie mit dem Eisenselektor zwischen den von Ihnen erstellten Ansichtskomponenten wechseln und dann mit der Funktion importHref importieren, sollten Sie auch die Set-Funktion des Polymers verwenden, um den Pfad anstelle dieser Go-Funktion zu ändern. so:

<app-location route="{{ route }}"></app-location> 
<app-route route="{{ route }}" 
      pattern="/:page" 
      data="{{ routeData }}" 
      tail="{{ subroute }}"></app-route> 

<iron-pages role="main" 
      attr-for-selected="route" 
      selected="[[ page ]]"> 
    <my-editor route="editor"></my-editor> 
    <my-analyze route="analyze"></my-analyze> 
    <my-community route="community"></my-community> 
</iron-pages> 

<script> 
    Polymer({ 
     is:'my-element', 
     properties: { 
      page: { 
       type: String, 
       notify: true, 
       reflectToAttribute: true, 
       observer: "_pageChanged" 
      } 
     }, 

     observers: [ 
      "_routePageChanged(routeData.page)" 
     ], 

     _changeRoute: function(e) { 
      this.importHref(
       this.resolveUrl("my-" + e.detail.requestRoute), null, null, true); 
      this.set("route.path", e.detail.requestRoute); 
     }, 

     _routePageChanged: function(page) { 
      this.page = page || "list"; 
     }, 
    }) 
</script>