Angular material 物料侧导航不关闭

在我的角度项目中，我有一个在mat nav列表中包含一些路由的。 在小屏幕上，sidenav具有背景的“结束”模式，但有时当我单击路由元素时，我会看到sidenav没有关闭，并失去背景，正如您在视频中看到的那样。 此sidenav由材料sidenav示意图生成，代码如下：

<mat-sidenav-container>
  <mat-sidenav #drawer [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
           [mode]="(isHandset$ | async) ? 'over' : 'side'"
           [opened]="(isHandset$ | async) === false"
           fixedInViewport>
     <mat-toolbar class="white">
       <img [attr.src]="'assets/img/logo.png'">
     </mat-toolbar>

     <mat-nav-list>
      <a href="#" mat-list-item (click)="drawer.toggle()" routerLink="dashboard">
        <mat-icon>analytics</mat-icon>
        <div>dashboard</div>
      </a>

      <a href="#" mat-list-item (click)="drawer.toggle()" routerLink="documents">
        <mat-icon>text_snippet</mat-icon>
        <div>documents</div>
      </a>

      <a href="#" mat-list-item (click)="drawer.toggle()" routerLink="eyeExams">
        <img class="mr-2" src="assets/img/eyeexam2.png" width="24px">
        <div>eyeexams</div>
      </a>

      <a href="#" mat-list-item (click)="drawer.toggle()" routerLink="contactLensSupply">
        <mat-icon >visibility</mat-icon>
        <div>contactlenssupply</div>
      </a>
    </mat-nav-list>
   </mat-sidenav>
   <mat-sidenav-content>
     <router-outlet></router-outlet>
  </mat-sidenav-content>
</mat-sidenav-container>

这是组件中的属性：

  isHandset$: Observable<boolean> = this.breakpointObserver.observe('(max-width: 899px)')
    .pipe(
      map(result => result.matches),
      shareReplay()
    );

isHandset$：Observable=this.breakpointObserver.Observable（'（最大宽度：899px）'））
.烟斗(
映射（result=>result.matches），
shareReplay（）
);