Angular Material Nav Sidebar 仅在响应式调整大小时显示

Question

我正在关注这个视频 (https://www.youtube.com/watch?v=Q6qhzG7mObU) 教程，了解如何使用工具栏设置 Angular Material Sidenav，但它似乎只有在我调整页面大小后才会生效。不知道是不是我的小问题，还是我漏掉了什么小问题。

Doesn't show the menu icon on page load (even if page starts on mobile size)

Shows menu icon as soon as page resizes to a mobile size

import { Component } from '@angular/core';
import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
import { Observable } from 'rxjs';
import { map, share } from 'rxjs/operators';

@Component({
  selector: 'app-nav-bar',
  templateUrl: './nav-bar.component.html',
  styleUrls: ['./nav-bar.component.css']
})
export class NavBarComponent {

  isHandset$: Observable<boolean> = this.breakpointObserver.observe(Breakpoints.Handset)
    .pipe(
      map(result => result.matches),
      share()
    );

  constructor(private breakpointObserver: BreakpointObserver) {}

<mat-sidenav-container class="sidenav-container">
  <mat-sidenav #drawer class="sidenav" fixedInViewport
      [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
      [mode]="(isHandset$ | async) ? 'over' : 'side'"
      [opened]="(isHandset$ | async) === false">
    <mat-toolbar>Menu</mat-toolbar>
    <mat-nav-list>
      <a mat-list-item href="#">Link 1</a>
      <a mat-list-item href="#">Link 2</a>
      <a mat-list-item href="#">Link 3</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>ProjectVAS</span>
    </mat-toolbar>
    <!-- Add Content Here -->
  </mat-sidenav-content>
</mat-sidenav-container>

.sidenav-container {
  justify-content: space-between;
  height: 100%;
}

.sidenav {
  width: 150px;
}

它必须只显示菜单按钮（或页面加载的一侧）

Answer 1

教程的问题有时是它们告诉你该做什么，而不是你正在做什么。由于您显然是 Angular Material 的新手，因此您应该花一些时间阅读文档并理解您正在使用的代码：https://material.angular.io/components/sidenav/overview。

mode 属性控制侧导航的外观。 opened 属性控制它是否打开/显示。您已将这两个属性“绑定”到断点观察器，以便它们的值根据 - 在本例中 - 设备是否是手机而改变。因此 - 如果您更改屏幕尺寸，菜单的行为可能会发生变化。

通过静态设置属性来修复它：

mode="side"
opened="true"

或者你喜欢的任何行为。