Как закрыть Material SideNav, нажав на элемент, у которого RouterLink работает только на мобильных устройствах

Question

Я использую угловой 8 в сочетании с угловым материалом.Я использую угловой материал Sidenav роутер и пользовательское меню: `

<mat-sidenav-container>
  <mat-sidenav #sidenav [mode]="mode" [opened]="openSidenav">
    <ul class="card-body">
       <li><a  [routerLink]="[ 'viewprofile' ]">View Profile</a></li>
       <li><a  [routerLink]="[ 'editprofile' ]">Edit Profile</a></li>
   </ul>
 </mat-sidenav>
 <mat-sidenav-content>
  <router-outlet></router-outlet>
 </mat-sidenav-content>
</mat-sidenav-container>`

Answer 1

Самое простое решение - использовать функцию close() в обработчике кликов:

<a [routerLink]="[ 'viewprofile' ]" (click)="sidenav.close()">View Profile</a>

Вы можете даже обработать закрытие на уровне sidenav, если это вас устраивает:

<mat-sidenav #sidenav [mode]="mode" [opened]="openSidenav" (click)="sidenav.close()">

Более сложный подход - подписаться на события маршрутизатора в вашем компоненте, который содержит sidenav, и закрыть его на основе навигации:

import { Component, ViewChild } from '@angular/core';
import { Router, NavigationStart } from '@angular/router';
import { Observable } from 'rxjs';
import { filter } from 'rxjs/operators';

@Component({
  selector: 'my-app',
  template: `
    <mat-sidenav-container>
      <mat-sidenav #sidenav [mode]="mode" [opened]="openSidenav">
        <ul class="card-body">
          <li><a [routerLink]="[ 'viewprofile' ]">View Profile</a></li>
          <li><a [routerLink]="[ 'editprofile' ]">Edit Profile</a></li>
        </ul>
      </mat-sidenav>
      <mat-sidenav-content>
        <router-outlet></router-outlet>
      </mat-sidenav-content>
    </mat-sidenav-container>
  `
})
export class AppComponent {
  @ViewChild('sidenav') sidenav;

  navStart: Observable<NavigationStart>;

  constructor(private router: Router) {
    // Create a new Observable that publishes only the NavigationStart event
    this.navStart = router.events.pipe(
      filter(evt => evt instanceof NavigationStart)
    ) as Observable<NavigationStart>;

    this.navStart.subscribe(nav => {
      this.sidenav.close();
    });
  }
}