Polymer app-drawer 打开隐藏页面答案

【问题标题】：Polymer app-drawer opening the page with it hiddenPolymer app-drawer 打开隐藏页面
【发布时间】：2016-06-14 20:33:44
【问题描述】：

我安装了一个新的 Polymer Starter Kit，代码如下。

<app-drawer-layout fullbleed>

      <!-- Drawer content -->
        <app-drawer>
          <app-toolbar>

如何在布局加载时关闭 app-drawer 元素？

如果我在元素上触发 .close() 我应该什么时候运行它？它不适用于 ready 或 attatched 生命周期回调

但这意味着菜单打开和关闭我想避免，我真正想要发生的是当页面加载时菜单关闭，

当我收到来自服务器的回调说用户已通过身份验证然后调用

this.$.menu.open() // where i've given app-drawer the if of menu

【问题讨论】：

标签： polymer polymer-1.0 polymer-starter-kit

【解决方案1】：

如果您想要不显示抽屉，无论视口宽度如何，除非用户交互，您需要做的就是将app-drawer-layout 的forceNarrow 属性设置为true，如下所示：

<app-drawer-layout fullbleed force-narrow>
  <!-- Content -->
</app-drawer-layout>

【讨论】：

【解决方案2】：

我假设这是对以下内容的跟进：Polymer 1.0 App-Drawer - Uncaught TypeError when not rendered via dom-if

给定：

<app-drawer-layout id="layout" fullbleed>
  <app-drawer id="drawer">
  ...
  </app-drawer>
</<app-drawer-layout>

您可以使用观察者根据signedIn 的新值设置<app-drawer>.hidden 属性，然后设置<app-drawer-layout>.resetLayout()：

Polymer({
  ...
  properties : {
    signedIn: {
      type: Boolean,
      value: false,
      observer: '_signedInChanged'
    }
  },
  _signedInChanged: function(signedIn) {
      this.$.drawer.hidden = !signedIn;
      this.$.layout.resetLayout();
  }
);

^codepen

【讨论】：