Navigation durch dynamische Seiten Polymer

Question

Ich arbeite an einem Polymer WebApp mit Spring-Boot, bisher habe ich zwei separate Apps, weil ich nicht herausfinden, wie von Tab zu Tab navigieren, würde ich wirklich Ich mag es, die beiden zusammenzufassen.

Wie Sie auf dem ersten Bild sehen können, gibt es Registerkarten, die ich gerne durch sie navigieren würde die Anwendungen Registerkarte würde mich zum Beispiel zur App in das andere Bild bringen. Ich suche viel im Internet, aber ich finde nur heraus, wie man zwischen statischen Inhalten navigieren kann.

Dies ist die erste App

und seine src

und dies die andere App

und seine src

Answer 1

Sie können die App-Route-Komponente verwenden. https://elements.polymer-project.org/elements/app-route

Hier ist der Polycast über die App-Route. https://www.youtube.com/watch?v=iAgSvlYavX0&list=PLOU2XLYxmsII5c3Mgw6fNYCzaWrsM3sMN&index=2

Grundsätzlich verwenden Sie das Attribut route und page, um die aktive Route festzulegen. Der Wechsel zwischen dem aktiven Code wird mit der Iron-Selector-Komponente durchgeführt.

Etwas wie folgt aus:

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

<iron-selector attr-for-selected="route" 
       selected="[[ page ]]" 
       role="navigation"> 
    <a route="editor" href="/editor">Editor</a> 
    <a route="analyze" href="/analyze">Analyze</a> 
    <a route="community" href="/community">Community</a> 
</iron-selector> 

<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)" 
     ], 

     attached: function(e) { 
      // Lazyload the views as soon as the AppShell has been Painted 
      this.importHref(
       this.resolveUrl("my-editor.html"), null, null, true); 
      this.importHref(
       this.resolveUrl("my-analyze"), null, null, true); 
      this.importHref(
       this.resolveUrl("my-community"), null, null, true); 

      // If the application is reloaded, redirect to /analyze 
      if(this.page != "analyze"){ 
       this.set("route.path", "/analyze"); 
      } 
     }, 

     _changeRoute: function(e) { 
      this.set("route.path", e.detail.requestRoute); 
     }, 

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