Question

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

<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>

e.g。我添加内容然后工作。我怎么解决这个愚蠢的问题？

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

Answer 1

除非您在<md-sidenav-container>内填充<md-sidenav>内容，否则您无法看到自己的旁边是over重叠（如果是side模式，或只是推入{{} 1}}模式）您的<md-sidenav-container>。

因此，只要你的容器不包含任何东西，它就是空的而空的div没有任何高度，你的相关sidenav也是如此。

Answer 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

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

2 个答案: