角度2中奇怪的sidenav行为？

Question

我正在制作材质设计应用角度2和角度材质。我有一个Header组件，其中包含md-toolbar和md-sidenav md-sidenav container这里是header.component.html：

<md-sidenav-container>
<md-sidenav #sidenav class="left-nav">
    <md-nav-list>
        <a md-list-item href="#"> Home </a>
        <a md-list-item href="#"> About </a>
    </md-nav-list>
</md-sidenav>

<md-toolbar color="primary">
    <button md-icon-button (click)="sidenav.open()">
        <md-icon>menu</md-icon>
    </button>
    <span> Trends </span>
</md-toolbar>

我有另一个故事组件，它使用*ngFor来打印列表的内容。这是我的stories.component.html：

<div class="main-content">
  <ol>
    <li *ngFor="let story of stories; let i = index" class="post">
      <span> {{ story.title }} </span>
    </li>
  </ol>
</div>

现在这个工作正常，但是当 sidenav被打开时，它只包含在工具栏中，如下所示： 这不是它想要的。所以我在sidenav-container中使用了角度fullscreen标签（？）：

<md-sidenav-container fullscreen>

这使得sidenav看起来正常 但现在stories组件的内容不再可见。 <li>元素仍然存在（我可以在Chrome开发工具中看到它们），但它们在页面上不可见。这就是我的app.component.html的布局方式：

<div id="wrapper">
  <app-header></app-header>
  <app-stories></app-stories>
</div>

我希望有一个典型的sidenav覆盖我的整个页面，我也希望我的stories组件的内容能够正确显示。我试过移动md-toolbar指令和其他一些东西，但没有用。如何解决这个问题？