如何使用角度材料制作侧导航组件2

Question

专家。

我想使用side nav component制作angular material 2。

我想将side nav component和contents component分开。

所以，我制作了两个组件。侧导航和内容。

<!--contents.component.html-->
<md-sidenav-container>
  <app-side-nav></app-side-nav>
  <div>Main content</div>
</md-sidenav-container>

<!--side-nav.component.html-->
<md-sidenav mode="side" opened="true">
  <md-list>
    <md-list-item><i class="material-icons" [ngClass]="{'active': activatePath === 'main'}">home</i></md-list-item>
    <md-list-item><i class="material-icons" [ngClass]="{'active': activatePath === 'user'}">person</i></md-list-item>
    <md-list-item><i class="material-icons" [ngClass]="{'active': activatePath === 'gas-setting'}">settings</i></md-list-item>
 </md-list>
</md-sidenav>

但是，此代码效果不佳。

现在正在工作

预期工作

我如何处理单独的两个组件??

Answer 1

只需将你放在容器内

<md-sidenav-container>
<!--side nav component-->
<md-sidenav mode="side" opened="true">
  <md-list>
    <md-list-item><i class="material-icons" [ngClass]="{'active': activatePath === 'main'}">home</i></md-list-item>
    <md-list-item><i class="material-icons" [ngClass]="{'active': activatePath === 'user'}">person</i></md-list-item>
    <md-list-item><i class="material-icons" [ngClass]="{'active': activatePath === 'gas-setting'}">settings</i></md-list-item>
 </md-list>
</md-sidenav>

  <app-side-nav></app-side-nav>
   <div>Main content</div>
</md-sidenav-container>

Here is working plunker