mat-sidenav-container 断点覆盖

Question

我正在使用 mat-sidenav-container
有没有办法覆盖断点，所以当屏幕达到一定宽度时抽屉不会自动打开？

600 像素以下 - 显示汉堡包

目前@600px 它会自动打开
我只希望它在用户点击汉堡时打开
超过 600 像素 - 保持打开状态

  <mat-sidenav-container class="sidenav-container">
    <mat-sidenav
      #drawer
      class="sidenav"
      fixedInViewport="false"
      [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
      [mode]="(isHandset$ | async) ? 'over' : 'side'"
      [opened]="!(isHandset$ | async)">
      <mat-toolbar color="primary">Menu</mat-toolbar>
      <mat-nav-list *ngFor="let i of navItems">
        <a *ngIf="(i.navText) && (i.router) && (i.showYNNav === 'Y')"
           mat-list-item [routerLink]="[i.router]">{{i.navText}}</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>
          <a class="mat-toolbar mat-primary homeLink"
            [routerLink]="['/']"
            routerLinkActive="active"
            [routerLinkActiveOptions]="{exact: true}">
            <span>Site Name Here</span>
          </a>
        </span>
      </mat-toolbar>
      <div class="componentMargin">
        <router-outlet #outlet="outlet"></router-outlet>
      </div>
      <app-footer></app-footer>
    </mat-sidenav-content>
  </mat-sidenav-container>

在.ts中

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

Answer 1

当然，你发完问题就知道了

对属性进行硬编码似乎可以解决问题
而不是使用监视断点的 isHandset$ observable

attr.role="dialog"
mode="over"
opened="false"