app-header内的聚合物app-drawer无法正常工作

Question

我试图将我的页面显示为文档的正文。但是如果我把抽屉放在标题下面，页面的内容就不会出现了。如果我改变位置并将抽屉放在标题上方，我的页面就会显示出来。以下是我的一段代码。

  <app-location
       route="{{route}}"
       url-space-regex="^[[rootPath]]">
   </app-location>

   <app-route
       route="{{route}}"
       pattern="[[rootPath]]:page"
       data="{{routeData}}"
       tail="{{subroute}}">
   </app-route>

     <!-- Main content -->
     <app-header-layout has-scrolling-region>

       <app-header slot="header" condenses reveals effects="waterfall">
         <app-toolbar>
           <paper-icon-button icon="my-icons:menu" drawer-toggle></paper-icon-button>
           <div main-title>[[title]]</div>
         </app-toolbar>
       </app-header>

     <app-drawer-layout fullbleed narrow="{{narrow}}">
     <!-- Drawer content -->
      <app-drawer id="drawer" slot="drawer" swipe-open="[[narrow]]">
       <app-toolbar>Menu</app-toolbar>
       <iron-selector selected="[[page]]" attr-for-selected="name" class="drawer-list" role="navigation">
         <!-- <a name="view1" href="[[rootPath]]view1">View One</a> -->
         <a name="aA" href="[[rootPath]]aA">AA</a>
         <a name="bB" href="[[rootPath]]bB">BB</a>
       </iron-selector>
     </app-drawer>

       <iron-pages
           selected="[[page]]"
           attr-for-selected="name"
           role="main">
         <a-a name="aA" title="{{title}}"></a-a>
         <b-b name="bB"  title="{{title}}"></b-b>
       </iron-pages>
        </app-drawer-layout>
     </app-header-layout>
 </template>

Answer 1

<app-header-layout>应该在<app-drawer-layout>内。

<app-drawer-layout>
    <app-drawer></app-drawer>
    <app-header-layout>
        <app-header>
            <app-toolbar></app-toolbar>
        </app-header>
        <iron-pages></iron-pages>
    </app-header-layout>
</app-drawer-layout>