응용 프로그램 헤더 안의 폴리머 앱 서랍이 작동하지 않습니다.

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>