Angular Material：如何將 Sidenav/Drawer 設置為默認打開？

Question

我正在使用 Angular Material Sidenav組件。

當我提供網頁時，側邊欄沒有出現（第一張圖片）。

但是，當我調整瀏覽器的大小一段時間后，最終會出現Sidenav （帶有漢堡圖標的第二個圖像），這是所需的狀態。

為什么是這樣？ 有沒有辦法讓它默認顯示？

---

Answer 1

根據 Angular Material 文檔， MatDrawer / MatSidenav打開狀態可以使用屬性opened以及方法open() 。

MatSidenav 擴展了 MatDrawer

選擇器：mat-sidenav
導出為：matSidenav

特性
@Input() opened: boolean - 抽屜是否打開。 我們重載它是因為我們在它開始或結束時觸發了一個事件。

方法
open - 打開抽屜。

例子

<mat-sidenav-container class="example-container">
  <mat-sidenav #sidenav mode="side" opened="true">
    Sidenav content
  </mat-sidenav>

  <mat-sidenav-content>
    <p>The content.</p>
  </mat-sidenav-content>
</mat-sidenav-container>

請參閱官方的Angular Material Sidenav 示例。

Answer 2

我在側邊欄的默認角度材料示意圖中注意到了這一點。 出於某種原因，作為異步的BreakpointObserver似乎無法立即用於導航打開按鈕。 我使用了breakpointObserver.isMatched()而不是breakpointObserver.observe()

在組件中

get isHandset(): boolean {
  return this.breakpointObserver.isMatched(Breakpoints.Handset);
}