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

我将angular 4与angular material结合使用。
我正在使用sidenav容器路由器和自定义生成的菜单：

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

在菜单组件中，我使用默认的角度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，因为路由器出口在side navigation中。
但是，当我向(click)="sidenav.close()"添加a时，我的整个页面突然刷新，而不是仅仅跟随路由器链接。
我试过很多东西，但是我好像想不出来，希望有人能帮忙！

最佳答案

我创建了一个服务，以便sidenav可以从各种组件中控制。我跟踪了this example。
然后是监视路由器的事件并根据需要关闭。在app.component.ts中：

this.router.events.subscribe(event => {
  // close sidenav on routing
  this.sidenavService.close();
});

如果您只想关闭特定链接上的sidenav，这是行不通的，但是服务本身可以促进这一点。

关于angular - 如何通过单击具有RouterLink指令的元素来关闭Material SideNav？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/46935712/