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);
}