Polymer app-header-layout 强制更新

Question

我有一个 Polymer 应用程序布局设置，其中 app-header-layout 在 app-drawer-layout 内。我在app-header-layout 的contentContainer 内的各个页面之间来回切换。对于不同的页面，我有不同的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 个工具栏的页面，则页面的内容会显示在第二个工具栏的下方。

所以问题是：如何强制 app-header-layout 在重新加载页面时重新计算其值？

这可能很容易，但我就是找不到。谢谢！

这是一个例子。不完全一样，但我认为它说明了同样的问题。

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

Answer 1

app-header-layout 有一个resetLayout() 方法，该方法会根据app-header-layout 设置自动重新计算padding-top 或margin-top。

在每个页面加载时，您都可以这样做：

this.shadowRoot.querySelector('app-header-layout').resetLayout();