angular-5 material sidenav在单独的组件中可在其他组件中重用

Question

我是新的角度材料以下material.angular.io我想有多个页面上的sidnav他们提供的代码包含sidenav以及页面的内容，如下所示

    <mat-drawer-container class="sidebar-container" autosize>

      <mat-drawer #drawer class="sidebar-sidenav" mode="side">
        <!--sidenav content(links) goes here-->
        <app-sidenav></app-sidenav>

      </mat-drawer>

      <div class="sidebar-sidenav-content">
         <!--page content goes here-->
         <p>page content area</p>
      </div>

   </mat-drawer-container>

如果我想在多个页面上重用相同的sidenav，我将不得不在所有页面中一次又一次地编写相同的代码bcz如果我像这样从mat-drawer-container移出.sidebar-sidenav-content就不起作用了

<mat-drawer-container class="sidebar-container" autosize>

  <mat-drawer #drawer class="sidebar-sidenav" mode="side">
    <!--sidenav content goes here-->
    <app-sidenav></app-sidenav>

  </mat-drawer>

​

  <div class="sidebar-sidenav-content">
     <!--page content goes here-->
     <p>page content area</p>
  </div>

上面结构显示了sidenav下面的页面内容区域sidebar-sidenav-content，而我希望并排显示。

Answer 1

我最近完成了一个类似的任务，它是非常可行的。请参阅Michael Prentice的Dynamic Expanding Nav Drawer Example。您可以创建其他对象，如示例中的'navItems‘，并使用页面标题或其他路由数据来查找相关的sidenav项：

<mat-sidenav #appDrawer mode="over" opened="false">
<mat-nav-list>
  <app-menu-list-item *ngFor="let item of navItems" [item]="item"></app-menu-list-item>
</mat-nav-list>

​

虽然这提供了非常少的代码的灵活性，如果应用程序中有未来的变化，实现路由和守卫可能是具有挑战性的，所以你可能想要首先设计这些。