Polymer 2.0 Paper-Tabs displaying all imported elements at the same time with Iron-Pages and app-route

Question

I'm working with Polymer 2.0. Simply trying to create a basic format for my app. I'm using paper-tabs at the bottom of the app and using iron-pages, app-route, and app-location to properly route the tabs to 3 different pages.

The problem I am having is that the element gets loaded in when I click one of the tabs, but then stays on the page when I click on another tab, so I have 2 elements loaded in at the same time.

My code(basically the PSK, but with paper-tabs instead of iron-selector):

<link rel="import" href="../../bower_components/polymer/polymer-element.html">
<link rel="import" href="../../bower_components/paper-tabs/paper-tabs.html">
<link rel="import" href="../../bower_components/app-layout/app-layout.html">
<link rel="import" href="../../bower_components/app-layout/app-header-layout/app-header-layout.html">
<link rel="import" href="../../bower_components/app-layout/app-header/app-header.html">
<link rel="import" href="../../bower_components/app-layout/app-toolbar/app-toolbar.html">
<link rel="import" href="../../bower_components/paper-progress/paper-progress.html">
<link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="../../bower_components/iron-icons/iron-icons.html">
<link rel="import" href="../../bower_components/app-route/app-location.html">
<link rel="import" href="../../bower_components/app-route/app-route.html">

<link rel="lazy-import" href="/src/blah-app/app-home.html">
<link rel="lazy-import" href="/src/blah-app/app-featured.html">
<link rel="lazy-import" href="/src/blah-app/app-jars.html">
<link rel="lazy-import" href="/src/blah-app/app-fallback.html">

<dom-module id="app-hub">
  <template>
    <app-location route="{{route}}"></app-location>
    <app-route
        route="{{route}}"
        pattern="/:page"
        data="{{routeData}}"></app-route>

    <app-toolbar>
      <paper-icon-button icon="menu"></paper-icon-button>
      <div main-title>blah</div>
      <paper-icon-button icon="account-box"></paper-icon-button>
      <paper-progress value="10" indeterminate bottom-item></paper-progress>
    </app-toolbar>

    <paper-tabs
        selected="[[page]]"
        attr-for-selected="name">
      <paper-tab link>
        <a class="link" name="home" href="home">Home</a>
      </paper-tab>
      <paper-tab link>
        <a class="link" name="featured" href="featured">Featured</a>
      </paper-tab>
      <paper-tab link>
        <a class="link" name="jars" href="jars">My Jars</a>
      </paper-tab>
    </paper-tabs>

    <iron-pages
        selected="[[page]]"
        attr-for-selected="name"
        fallback-selection="fallback"
        role="main">
      <app-home name="home"></app-home>
      <app-featured name="featured"></app-featured>
      <app-jars name="jars"></app-jars>
      <app-fallback name="fallback"></app-fallback> 
    </iron-pages>
  </template>

  <script>
    class AppHub extends Polymer.Element {
      static get is() { return 'app-hub'; }
      static get properties() {
        return {
          page: {
            type: String,
            reflectToAttribute: true,
            observer: '_pageChanged',
          },
          routeData: Object,
          subroute: String,
        };
      }
      static get observers() {
        return [
          '_routePageChanged(routeData.page)',
        ];
      }
      _routePageChanged(page) {
        // Polymer 2.0 will call with `undefined` on initialization.
        // Ignore until we are properly called with a string.
        if (page === undefined) {
          return;
        }
        // If no page was found in the route data, page will be an empty string.
        // Deault to 'view1' in that case.
        this.page = page || 'home';
        console.log(page, 'routepagechanged');
      }
      _pageChanged(page) {
        console.log(page, 'pagechanged');
        // Load page import on demand. Show 404 page if fails
        var resolvedPageUrl = this.resolveUrl('app-' + page + '.html');
        Polymer.importHref(
            resolvedPageUrl,
            null,
            this._showPage404.bind(this),
            true);
      }
      _showPage404() {
        this.page = 'fallback';
      }
    }

    window.customElements.define(AppHub.is, AppHub);
  </script>
</dom-module>

Anyone know why this is happening? If I need to show you the elements being loading in I can, but they are basically just displaying text. Super simple. Thanks!

Answer 1

I think you miss name attribute cause <paper-tabs> must select paper-tab by its name and not <a> . You need to add name attribute to each paper-tab like this:

<paper-tabs
    selected="[[page]]"
    attr-for-selected="name">
  <paper-tab link name="home">
    <a class="link" href="home">Home</a>
  </paper-tab>
  <paper-tab link name="featured">
    <a class="link" href="featured">Featured</a>
  </paper-tab>
  <paper-tab link name="jars">
    <a class="link" href="jars">My Jars</a>
  </paper-tab>
</paper-tabs>

Answer 2

经过大量的努力，我发现我没有导入iron-pages元素。

<link rel="import" href="../../bower_components/iron-pages/iron-pages.html">