Side-Nav закрывается для всех устройств при выборе ссылки маршрутизатора

Question

Я использую side-nav в моем проекте. При изменении размера на номер переключателя мобильного телефона i, e side-nav будет отображаться слева вот так:

Теперь проблемы, которые side-nav закрывает при нажатии router link (бывший клиент) для all devices, я хочу, чтобы он закрывался только для небольших устройств (i,e mobile):

Я знаюэто дубликат этого вопроса:

Но эти ответы заставляют side-nav закрываться для всех устройств.

app-nav.html

 <mat-sidenav-container class="sidenav-container">
       <mat-sidenav #drawer class="sidenav mat-elevation-z4" 
           fixedInViewport="true" [attr.role]="(isHandset$ | async) ? 
           'dialog' : 'navigation'"
          [mode]="(isHandset$ | async) ? 'over' : 'side'" [opened]="! 
          (isHandset$ | async)">

             <mat-toolbar>Business</mat-toolbar>
                    <h2>{{business.name}}</h2>
                    <p class="">{{business.branch}}</p>
             <mat-divider></mat-divider>

           <mat-nav-list>
             <mat-list-item>
             <mat-icon matListIcon>home</mat-icon>
             <a matLine>Home</a>
          </mat-list-item>

          <mat-list-item  [routerLink]="['../customer']">
           <mat-icon matListIcon>person</mat-icon>
           <a matLine>Customers</a>
          </mat-list-item>

          <mat-list-item>
           <mat-icon matListIcon>group</mat-icon>
           <a matLine>Staff</a>
         </mat-list-item>
      </mat-sidenav>

      <mat-sidenav-content>
         <mat-toolbar class="ylet-header"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>
        </mat-toolbar>
      </mat-sidenav-content>

 </mat-sidenav-container>

app-nav.ts

   import { 
         BreakpointObserver,
         Breakpoints,
         BreakpointState,} from '@angular/cdk/layout';
  import { Component } from '@angular/core';
  import { FormControl } from '@angular/forms';
  import { MatSidenav, TooltipPosition } from '@angular/material';
  import { Router, RouterModule } from '@angular/router';
  import { Observable } from 'rxjs';
  import { map } from 'rxjs/operators';

  export interface IBusinessInfo {
        name: string;
        branch: string;
     }


  @Component({
   selector: 'ylb-app-nav',
   templateUrl: './app-nav.component.html',
   styleUrls: ['./app-nav.component.scss'],
  })
 export class AppNavComponent {

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

     public business: IBusinessInfo = {
            name: 'Phone store',
            branch: 'India',
       };

       constructor(private breakpointObserver: BreakpointObserver,
                         private _router: Router) {}

       ngOnInit(): void {
             this.router.events.subscribe(event => {
             this.sidenavService.close();
           });

     }

Answer 1

Для этого вам нужно использовать одно из событий RouterOutlet .

Просто реагируйте на события activate или deactivate, чтобы переключать sidenav с помощью входа opened:

<router-outlet
  (activate)='onActivate($event)'
  (deactivate)='onDeactivate($event)'></router-outlet>

Используйте BreakpointObserver из Angular CDK , чтобы получить информацию "мобильный или нет?"как это:

this.breakpointObserver.isMatched('(max-width: 767px)');