我有一个聚合物应用程序布局设置，app-drawer-layout内有一个app-header-layout。我在app-header-layoutcontentContainer内的各个页面之间来回切换。我对不同的页面有不同的app-toolbars。app-layout的工作方式是，如果你有一个大工具栏，你只需像这样将 2 个工具栏放在彼此之上：
<app-toolbar>
<div class="title" main-title><h1>Main Title</h1></div>
</app-toolbar>
<app-toolbar>
<div class="title" main-title><p class="subtitle">Subtitle</p></div>
</app-toolbar>
因此，有些页面有1 个工具栏，有些页面有 2 个工具栏。问题是，当您返回到之前访问过的页面时，app-header-layout的 contentContainer 不会自动将padding-top值调整为正确的工具栏高度。因此，如果这是一个具有 2 个工具栏的页面，则页面内容将显示在第二个工具栏下方。
所以问题是：当页面重新加载时，如何强制应用程序标题布局重新计算其值？
这可能是一件很容易的事情，但我就是找不到它。谢谢！
下面是一个示例。不完全相同，但我认为它说明了同样的问题。
<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/app-layout/app-drawer-layout/app-drawer-layout.html">
<link rel="import" href="../../bower_components/app-layout/app-scroll-effects/app-scroll-effects.html">
<link rel="import" href="../../bower_components/app-layout/app-drawer/app-drawer.html">
<link rel="import" href="../../bower_components/app-layout/app-toolbar/app-toolbar.html">
<link rel="import" href="../../bower_components/app-layout/app-header/app-header.html">
<link rel="import" href="../../bower_components/app-layout/app-header-layout/app-header-layout.html">
<dom-module id="page-selector">
<template>
<style is="custom-style">
#toolbar1 {
background-color:red;
}
#toolbar2 {
background-color:green;
}
</style>
<app-drawer-layout fullbleed responsive-width="840px">
<app-drawer slot="drawer">
<div id="drawerbox">
<h1>Menu</h1>
<ol><li>Item 1</li>
<li>Item 2</li></ol>
</div>
</div>
</app-drawer>
<div class="container">
<app-header-layout>
<app-header id="header" condenses reveals effects="waterfall" slot="header">
<app-toolbar id="toolbar1">
<div main-title id="toolbartitlebox">Title Toolbar 1</div>
<div on-tap="_toggleToolbar">Toggle Toolbar</div>
</app-toolbar>
<template is="dom-if" if="{{Toolbar2}}">
<app-toolbar id="toolbar2">
<div class="title" main-title>Title toolbar 2</div>
</app-toolbar>
</template>
</app-header>
<template is="dom-if" if="{{Toolbar1}}">
<h1>This is Page 1</h1>
<p>Some text for page 1</p>
</template>
<template is="dom-if" if="{{Toolbar2}}">
<h1>This is text for Page 2</h1>
<p>Some text for page 2</p>
</template>
</app-header-layout>
</div>
</app-drawer-layout>
</template>
<script>
Polymer({
is: 'page-selector',
properties: {
Toolbar1: {
type: Boolean,
value: true
},
Toolbar2: {
type: Boolean,
value: false
}
},
_toggleToolbar: function() {
this.Toolbar2 = !this.Toolbar2;
if (this.Toolbar2) {this.Toolbar1 = false} else {this.Toolbar1 = true};
}
});
</script>
</dom-module>
>app-header-layout有一个resetLayout()方法，可以根据app-header-layout设置自动重新计算padding-top或margin-top。
在每个页面加载时，您可以这样做：
this.shadowRoot.querySelector('app-header-layout').resetLayout();