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>必须按名称选择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>

Answer 2

经过多方努力，我发现我并没有导入铁页元素。

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

Polymer 2.0 Paper-Tabs使用Iron-Pages和app-route

2 个答案: