Polymer app-header-layout强制更新

时间:2017-07-18 13:59:41

标签: javascript polymer

我在app-header-layout内部设置了app-drawer-layout的Polymer应用布局设置。我在contentContainer的{​​{1}}内的各个页面之间来回切换。我对不同的页面有不同的app-header-layoutapp-toolbars的工作方式是,如果你有一个大工具栏,你只需将2个工具栏放在彼此的顶部,如下所示:

app-layout

所以有些页面有1个和其他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> 的contentContainer不会自动将app-header-layout值调整为正确的工具栏高度。因此,如果这是一个包含2个工具栏的页面,则页面内容将显示在第二个工具栏下方。

所以问题是:当重新加载页面时,如何强制app-header-layout重新计算它的值?

这可能很简单,但我找不到它。谢谢!

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

padding-top

1 个答案:

答案 0 :(得分:1)

app-header-layout有一种resetLayout()方法可自动重新计算padding-topmargin-top,具体取决于app-header-layout设置。

在每个页面加载时,你可以这样做:

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