Автоматическое закрытие боковой панели материала сразу после нажатия на элемент навигации не работает

Question

Мне нужно автоматически закрывать боковую панель материалов сразу после навигации, нажимая на элементы навигации боковой панели.но, похоже, это не работает естественным образом.Я создаю Stackblitz для своей проблемы:

Сайт редактора Stackblitz: https://stackblitz.com/github/adnanebrahimi/MaterialSidebarIssue

HTML:

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

Компонент:

export class SidebarLayoutComponent {

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

  constructor(private breakpointObserver: BreakpointObserver) {}

}

У нас есть isHandset$ в качестве наблюдаемого, чтобы определить, является ли устройство трубкой или нет с помощью этой функции, мы просто открываем его, если оно ложно, и закрываем его, если оно истинно, чтобы быть трубкой.Но я также хочу закрыть боковую панель, когда мы начнем переходить на другие страницы.

Спасибо.

Answer 1

Попробуйте использовать ту же самую функцию переключения (click)="drawer.toggle()", которая используется на значке гамбургера в sideNav во всех ваших ссылках sideNav

HTML:

<mat-nav-list>
  <a mat-list-item [routerLink]="['/page-one']" routerLinkActive="router-link-active" 
  (click)="drawer.toggle()">Page One</a>
  <a mat-list-item [routerLink]="['/page-two']" routerLinkActive="router-link-active" (click)="drawer.toggle()">Page Two</a>
  <a mat-list-item [routerLink]="['/page-eager']" routerLinkActive="router-link-active" (click)="drawer.toggle()">Page Eager</a>
</mat-nav-list>

Демонстрация Stackblitz

Answer 2

Я управляю этим по коду:

export class SidebarLayoutComponent {

 isHandset = false;
 isHandset$: Observable<boolean> = 

this.breakpointObserver.observe(Breakpoints.Handset)
  .pipe(
    map(result => {
    if (result.matches) {
      this.isHandset = true;
      return true;
    } else {
      this.isHandset = false;
      return false;
    }
  })
);

@ViewChild('drawer', { static: true }) drawer: MatDrawerContainer;

 constructor(private breakpointObserver: BreakpointObserver, private router: Router) 
{
  this.router.events.pipe(filter(event => event instanceof NavigationStart))
  .subscribe((event: NavigationStart) => {
    if (this.isHandset) {
      this.drawer.close();
      console.log('closed');
      }
    });

 }

}