我正在为宠物项目创建一个聚合物应用程序，使用聚合物初学者工具包，并对其进行修改以添加水平工具栏，背景图像等。到目前为止，除了应用程序工具栏中的链接在我单击它们时不会更新"视图"之外，一切正常。
到目前为止，我所有的调试都指向了"page"属性的方向。 我相信这没有得到更新或为空，导致视图默认为"关于"(根据入门套件为 View-2)，如_routePageChanged观察者方法中指定的那样。
我尝试在 Chrome 上的 DevTools 上使用调试器，但作为新手，我不太清楚我是否正确地完成了调试器。 我只是不停地进出数百个函数调用。
我正在复制应用程序外壳的相关部分。
请帮助或至少为我指出正确的方向;自 2 天以来，我一直在尝试解决此问题。 谢谢！
<app-location
route="{{route}}">
</app-location>
<app-route
route="{{route}}"
pattern=":view"
data="{{routeData}}"
tail="{{subroute}}">
</app-route>
<!-- Main content -->
<app-header-layout has-scrolling-region>
<app-header slot="header" class="main-header" condenses effects="waterfall">
<app-toolbar class="logo"></app-toolbar>
<app-toolbar class="tabs-bar" hidden$="{{!wideLayout}}">
<paper-tabs selected="[[selected]]" attr-for-selected="name">
<paper-tab><a href="[[rootPath]]home">Home</a></paper-tab>
<paper-tab><a href="[[rootPath]]about">About Us</a></paper-tab>
<paper-tab><a href="[[rootPath]]pricing">Pricing</a></paper-tab>
</paper-tabs>
</app-toolbar>
</app-header>
<iron-pages
selected="[[page]]"
attr-for-selected="name"
fallback-selection="view404"
role="main">
<my-view1 name="home"></my-view1>
<my-view2 name="about"></my-view2>
<my-view3 name="pricing"></my-view3>
<my-view404 name="view404"></my-view404>
</iron-pages>
</app-header-layout>
</app-drawer-layout>
<script>
class MyApp extends Polymer.Element {
static get is() { return 'my-app'; }
static get properties() {
return {
page: {
type: String,
reflectToAttribute: true,
observer: '_pageChanged'
},
wideLayout: {
type: Boolean,
value: false,
observer: 'onLayoutChange'
},
items: {
type: Array,
value: function() {
return ['Home', 'About', 'Pricing', 'Adults', 'Contact'];
}
},
routeData: Object,
subroute: String,
// This shouldn't be neccessary, but the Analyzer isn't picking up
// Polymer.Element#rootPath
// rootPath: String,
};
}
static get observers() {
return [
'_routePageChanged(routeData.page)',
];
}
_routePageChanged(page) {
// If no page was found in the route data, page will be an empty string.
// Default to 'view1' in that case.
this.page = page || 'about';
console.log('_routePageChange');
// Close a non-persistent drawer when the page & route are changed.
if (!this.$.drawer.persistent) {
this.$.drawer.close();
}
}
_pageChanged(page) {
// Load page import on demand. Show 404 page if fails
var resolvedPageUrl = this.resolveUrl(page + '.html');
Polymer.importHref(
resolvedPageUrl,
null,
this._showPage404.bind(this),
true);
}
_showPage404() {
this.page = 'view404';
}
_onLayoutChange(wide) {
var drawer = this.$.drawer;
if (wide && drawer.opened){
drawer.opened = false;
}
}
}
window.customElements.define(MyApp.is, MyApp);
</script>
这是我单击"主页"链接时页面的快照。
页面快照
我已经在我的应用程序上修复了同样的问题，页面观察到的功能如下：
static get properties() { return {
page:{
type:String,
reflectToAttribute:true,
observer: '_pageChanged'},
。
_pageChanged(page, oldPage) {
if (page != null) {
if (page === "home" ) {
this.set('routeData.page', "");
} else {
this.set('routeData.page', page);
}
.......
}
}
老实说，我仍在努力寻找更好的解决方案。因为我有用户页面，所以我无法在谷歌搜索结果中编入索引。这只会保持铁页和地址链接的同步。