3

我是角度材料的新手，material.angular.io 我想在多个页面上使用 sidnav 他们为 sidenav 提供的代码包含 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，如果我像这样.sidebar-sidenav-content离开它就不起作用mat-drawer-container

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

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

4

1 回答 1

1

我最近完成了一个类似的任务，它非常可行。请参阅Michael Prentice的动态扩展导航抽屉示例。您可以在示例中创建其他对象，例如“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>

虽然如果应用程序未来发生变化，这提供了非常少代码的灵活性，但实现路由和防护可能具有挑战性，因此您可能希望首先设计它们。

于 2018-06-01T19:42:53.623 回答