Polymer 2.0 Paper-Tabs通過Iron-Pages和app-route同時顯示所有導入的元素

Question

我正在使用Polymer 2.0。 只需嘗試為我的應用程序創建基本格式。 我在應用程序底部使用紙制標簽，並使用鐵頁，應用程序路由和應用程序位置將標簽正確地路由到3個不同的頁面。

我遇到的問題是，當我單擊一個選項卡時，元素被加載，但是當我單擊另一個選項卡時，該元素留在頁面上，因此我同時加載了2個元素。

我的代碼（基本上是PSK，但是帶有制表符而不是選擇器）：

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

有人知道為什么會這樣嗎？ 如果需要向您展示正在加載的元素，但是它們基本上只是在顯示文本。 超級簡單。 謝謝！

Answer 1

我認為您錯過了name屬性，因為<paper-tabs>必須按其名稱而不是<a>選擇paper-tab 。 您需要像這樣向每個paper-tab添加name屬性：

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