angular - 如何通过单击具有 RouterLink 指令的元素来关闭 Material SideNav？

Question

我正在使用 angular 4结合angular material .

我正在使用一个 sidenav 容器、一个路由器和一个自定义生成的菜单:

<mat-sidenav-container>
<mat-sidenav #sidenav>
    <app-menu></app-menu>
</mat-sidenav>
<router-outlet></router-outlet>
</mat-sidenav-container>

在菜单组件中，我使用默认的 Angular 4 路由器链接:

<ul>
  <li *ngFor="let hero of heroes">
    <a mat-button [routerLink]="['/hero/', hero.id]" queryParamsHandling="merge">
      {{hero.name}}
    </a>
  </li>
</ul>

我想做的是在单击其中一个路由器链接时关闭 Material sidenav。

我可以向您保证，如果没有点击事件路由也能正常工作，它只是不会关闭我的 sidenav，因为 router-outlet 位于侧边导航内。

但是，当我将 (click)="sidenav.close()" 添加到 a 时，我的整个页面突然刷新，而不是仅仅跟随路由器链接.

我试了很多东西，但我似乎无法弄清楚，希望有人能帮忙!

Answer 1

这是一个基于 Angular Material 的原理图生成的 sidenav 布局组件的完整解决方案。这个答案通过考虑我们是否在手机设备上并确保 sidenav 仅在手机设备上关闭来改进以前的答案。

几点:

1. 此组件是使用 Angular Materials 生成的 navigation schematics .
2. 我将我的组件命名为 my-menu 但是，您可以使用任何其他名称。
3. 仅当我们不在手机设备上时sidenav才会关闭，这是使用rxjs运算符withLatestFrom结合isHandset$ 由原理图生成的流。

import { Component, ViewChild } from '@angular/core';
import { BreakpointObserver, Breakpoints, BreakpointState } from '@angular/cdk/layout';
import { Observable } from 'rxjs';
import { map, filter, withLatestFrom } from 'rxjs/operators';
import { Router, NavigationEnd } from '@angular/router';
import { MatSidenav } from '@angular/material';

@Component({
  selector: 'app-my-menu',
  templateUrl: './my-menu.component.html',
  styleUrls: ['./my-menu.component.css']
})
export class MyMenuComponent {
  @ViewChild('drawer') drawer: MatSidenav;

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

  constructor(private breakpointObserver: BreakpointObserver,
    router: Router) {
    router.events.pipe(
      withLatestFrom(this.isHandset$),
      filter(([a, b]) => b && a instanceof NavigationEnd)
    ).subscribe(_ => this.drawer.close());
  }
}