【问题标题】：how to make material side nav display on all page如何在所有页面上显示材质侧导航
【发布时间】：2019-08-05 18:56:23
【问题描述】：

我创建了材质侧导航并将其添加到我的应用程序中，但它无法正常工作。我需要将导航组件放在哪里？

我想用侧导航替换我的应用程序的水平导航，我使用了材质侧导航。当我单击按钮打开菜单时，即使我在应用程序组件中实现导航，逻辑也不适用于所有组件。如何修复可见性？

这是我的菜单组件：

<mat-drawer-container class="container" autosize>
  <mat-drawer #drawer class="sidenav">
      <!-- <p>Menu</p> -->
      <ul>
        <li><a href="#" (click)="onSelect($event.target.text)">Home</a></li>
        <li><a href="#" (click)="onSelect($event.target.text)">About</a></li>
        <li><a href="#" (click)="onSelect($event.target.text)">Products</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
  </mat-drawer>
  <div class="sidenav-content">
      <button mat-icon-button (click)="drawer.toggle()">
          <mat-icon>menu</mat-icon>
      </button>
  </div>
</mat-drawer-container>

这是我的应用组件：

[<main>  
    <app-menu (pageSelected)="onNavigate($event)"></app-menu> 
    <app-header></app-header>
    <app-home *ngIf="loadedPage === 'Home'"></app-home>
    <app-cards-body *ngIf="loadedPage === 'Products'"></app-cards-body>
    <app-about *ngIf="loadedPage === 'About'"></app-about>
</main>][1]

菜单可以正常打开，但没有覆盖整个页面。如果我将菜单放在应用程序组件的其他组件上方，我会得到一个空白页面但没有任何错误：

图片1：

图 2：

图 3：

【问题讨论】：

你不应该通过 *ngIfs 显示组件，你应该使用路由。无论如何，<mat-drawer-container> 属于您的app.component.html，而不是main-menu.html

标签： angular angular-material sidenav

【解决方案1】：

AppComponent 应包含应用程序的高级脚手架，例如 sidenav 或 drawer 组件。

app.component.html

<mat-drawer-container class="container">
  <mat-drawer #drawer mode="side" opened>
    <!-- <p>Menu</p> -->
    <ul>
      <li><a href="#" (click)="onSelect($event.target.text)">Home</a></li>
      <li><a href="#" (click)="onSelect($event.target.text)">About</a></li>
      <li><a href="#" (click)="onSelect($event.target.text)">Products</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </mat-drawer>

  <mat-drawer-content>
    <app-header></app-header>
    <button mat-icon-button (click)="drawer.toggle()">
      <mat-icon>menu</mat-icon>
    </button>
  </mat-drawer-content>
</mat-drawer-container>

【讨论】：