聚合物2.0纸-表格同时显示所有进口元素与铁页和应用程序路线

Question

我在使用高分子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

经过一番努力，我发现我没有导入铁页元素.

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

Answer 2

我认为您错过了name属性，因为<paper-tabs>必须按其名称选择paper-tab，而不是<a>。您需要将name属性添加到每个paper-tab中，如下所示：

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