Question

我正在使用spring-boot工作在聚合物webApp上，到目前为止，我确实喜欢两个单独的应用程序，因为我无法弄清楚如何从一个选项卡导航到另一个选项卡，我＆＃39 ; d非常想合并这两个我不介意有按钮导航。

正如你在第一张图片中看到的那样，有一些标签我想在其中导航，应用程序选项卡会将我带到另一张图片中的应用程序。我通过网络搜索了很多，但我能找到的是如何在静态内容之间导航。

这是第一款应用

及其src

这是另一个应用

及其src

Answer 1

您可以使用app-route组件。 https://elements.polymer-project.org/elements/app-route

这是关于app-route的polycast。 https://www.youtube.com/watch?v=iAgSvlYavX0&list=PLOU2XLYxmsII5c3Mgw6fNYCzaWrsM3sMN&index=2

基本上，您将使用route和page属性来设置活动的路由。将使用铁选择器组件在哪段代码处于活动状态之间切换。

这样的事情：

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

通过动态页面聚合

1 个答案: