angular2 材质中的 md-sidenav-container 不显示内容答案

【问题标题】：md-sidenav-container in angular2 material does not show contentangular2 材质中的 md-sidenav-container 不显示内容
【发布时间】：2017-03-04 17:19:39
【问题描述】：

我使用下面的侧导航不显示。如果我添加内容，侧边栏会显示。哇..

<md-sidenav-container mode="side" >
  <md-sidenav #sidenav  opened="true" style="background-color: green">
        Dude!!!!!!
  </md-sidenav>

  <div class="my-content" style="background-color: blue">
    <router-outlet name="servicelistright"></router-outlet>
  </div>

</md-sidenav-container>

例如我添加内容然后工作。我如何解决这个愚蠢的问题？

   <div class="my-content" style="background-color: blue">
    Whats the deleio?
    <router-outlet name="servicelistright"></router-outlet>
  </div>

【问题讨论】：

没有内容的时候会不会是页面宽度太小了？所以sidemenu没有任何地方可以显示自己？

标签： angular angular-material

【解决方案1】：

除非你用内容填充你的<md-sidenav-container>，否则你看不到侧导航的原因是<md-sidenav> 重叠（在over 模式的情况下，或者只是推入side 模式）你的<md-sidenav-container>。

因此，只要您的容器不包含任何内容，它就是空的，并且空 div 没有任何高度，您相关的 sidenav 也是如此。

【讨论】：

【解决方案2】：

<md-sidenav-container class="container-fluid">
  <!-- separating content between each other -->   
  <div class="col-md-1">
      <button md-button (click)="sidenav.open()">
           <i class="fa fa-list"></i>
      </button>
  </div>
  <div class="col-md-11">
    Main content goes here
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  </div>

  <!-- below contains elements for menu strip -->
  <md-sidenav #sidenav class="example-sidenav">
   Menu bar
  </md-sidenav>

</md-sidenav-container>

注意：添加<br> 是为了创建高度。

LIVE DEMO

【讨论】：