Angular Material sidenav 始終在桌面上打開

Question

我是 Angular 的新手，我正在嘗試應用 Angular 材料（當前版本）中的 sidenar 組件。

我在 main-nav 組件中有以下代碼：

<mat-sidenav-container class="sidenav-container" autosize>
    <mat-sidenav #drawer class="sidenav" fixedInViewport
    [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
    [mode]="(isHandset$ | async) ? 'over' : 'side'"
    [opened]="(isHandset$ | async) === false">
  <mat-toolbar ><div class="menuTitle">Menu</div></mat-toolbar>
  <mat-nav-list>
    <a mat-list-item href="#">Dashboard</a>
    <a mat-list-item href="#">Screen2</a>
  </mat-nav-list>
</mat-sidenav>

<mat-sidenav-content>
    <mat-toolbar color="primary">
      <button
        type="button"
        aria-label="Toggle sidenav"
        mat-icon-button
        (click)="drawer.toggle()"
        *ngIf="isHandset$ | async">
        <mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
      </button>
      <span class="title">Information System</span>
    </mat-toolbar>
    <!-- Add Content Here -->
  </mat-sidenav-content>
</mat-sidenav-container>

當我運行應用程序時，菜單或漢堡包圖標沒有出現。 如果我將瀏覽器縮小到移動尺寸，就會出現漢堡包圖標，我可以訪問側邊導航並打開和關閉它。 如果我隨后展開瀏覽器，菜單會保留在原位，我無法切換它。

當我在桌面屏幕上啟動應用程序時，如何讓菜單/漢堡包圖標出現？

作為額外的，我可以讓側邊導航出現在工具欄下方嗎？

Answer 1

所有這些行為都是你編碼的。 您已將按鈕設置為有條件的，以便它僅針對手機媒體類型顯示。 如果不是聽筒，您還將抽屜設置為在“側面”模式下固定打開。 你把工具欄放在 sidenav 里面而不是它上面。 停止做這些事情來獲得你想要的行為：

<mat-toolbar color="primary">
  <button
    type="button"
    aria-label="Toggle sidenav"
    mat-icon-button
    (click)="drawer.toggle()">
    <mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
  </button>
  <span class="title">Site Information System</span>
</mat-toolbar>

<mat-sidenav-container class="sidenav-container" autosize>
  <mat-sidenav #drawer class="sidenav" fixedInViewport
    [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
    [mode]="(isHandset$ | async) ? 'over' : 'side'">
    <mat-toolbar ><div class="menuTitle">Menu</div></mat-toolbar>
    <mat-nav-list>
      <a mat-list-item href="#">Dashboard</a>
      <a mat-list-item href="#">Wilton 10 QI</a>
    </mat-nav-list>
  </mat-sidenav>

  <mat-sidenav-content>
    <!-- Add Content Here -->
  </mat-sidenav-content>
</mat-sidenav-container>

Answer 2

我嘗試了上面的其他建議，效果更好，但這些不是我所期望的。 所以，我刪除了

[mode]="(isHandset$ | async) ? 'over' : 'side'"

和

*ngIf="isHandset$ | async

最后但並非最不重要的一點是，我在此行代碼中將 false 值更改為 true：

[opened]="(isHandset$ | async) === false"

這些變化使我們成為可能：

• 頁面加載時，導航列表關閉。
• 此外，您可以在導航列表元素外部單擊以將其關閉。

上面的其他建議對我實現這些行為沒有用。

Answer 3

消除

[mode]="(isHandset$ | async) ? 'over' : 'side'"

和

*ngIf="isHandset$ | async