Question

我是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就行不通/ p>

<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，而我想要并排。

Answer 1

我最近完成了一项类似的任务，这是非常可行的。请通过 Michael Prentice 查看Dynamic Expanding Nav Drawer Example。您可以创建其他对象，例如＆＃39; navItems＆＃39;在示例中，使用页面标题或其他路径数据来查找相关的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>

虽然如果应用程序中有未来的更改，这可以提供极少代码的灵活性，但实现路由和防护可能具有挑战性，因此您可能希望首先进行设计。

角度为5的材料sidenav在一个单独的组件中，以重用于其他组件

1 个答案: