2016-08-09 4 views
1

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.Navigation durch dynamische Seiten Polymer

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 enter image description here

und seine src

enter image description here

und dies die andere App

enter image description here

und seine src

enter image description here

Antwort

3

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> 
+0

ja ich sah das Video, aber ich weiß nicht, wie sie auf die Registerkarten Element – mahaSaez

+0

Bei meiner Probe zu verbinden habe ich die Eisen-Wähler und die Eisen-Seiten-Komponenten, Der Iron-Selector ist die Option für die Navigationsleiste und die Iron-Pages sind der Seitenwechsel-Manager und die Seite der Routenattributwert. Wenn Sie auf die Eisen-Selektor-Option klicken, wird es zu der URL durch die href "Gehe zu/Editor" sagen, auch aktualisiert die Variable Seite auf den Wert der Route auf der , Seite ist die Variable, die verwendet wird Durch die Eisen-Seiten, um zu wissen, welcher Teil des Codes aktiv sein sollte, wird die Attribut-Route, die den gleichen Namen wie die Attibute-Seite hat, betrachtet und dieser Teil des Codes aktiviert. – MarioAleo

Verwandte Themen