angular - 如何在所有页面上显示材质侧导航

Question

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

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

这是我的菜单组件：

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

Answer 1

应该包含应用程序的AppComponent高级脚手架，例如sidenavordrawer组件。

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>