[英]Polymer 2.0 Paper-Tabs displaying all imported elements at the same time with Iron-Pages and app-route
我正在使用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>
有人知道为什么会这样吗? 如果需要向您展示正在加载的元素,但是它们基本上只是在显示文本。 超级简单。 谢谢!
我认为您错过了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>
经过大量的努力,我发现我没有导入iron-pages元素。
<link rel="import" href="../../bower_components/iron-pages/iron-pages.html">
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.