Angular Material侧边栏路由问题：默认选中与异常关闭

问题描述 #

我在应用中使用Angular Material的mat-sidenav结合路由功能，代码如下：

<mat-sidenav-container [hasBackdrop]="true" autosize>
    <mat-sidenav
        (opened)="openCollapsed()"
        [opened]="!isMobile"
        [fixedInViewport]="!isMobile"
        [fixedTopGap]="64"
        [fixedBottomGap]="40"
        [mode]="isMobile ? 'over' : 'side'"
    >
    <mat-nav-list>
      <a
        *ngFor="let route of routes"
        mat-list-item
        (click)="selectNavItem(route.path)"
      >
        {{ route.label }}</a
      >
    </mat-nav-list>
  </mat-sidenav>
    <mat-sidenav-content>
        <div class="app-result">
            <router-outlet></router-outlet>
        </div>
    </mat-sidenav-content>
</mat-sidenav-container>

路由功能基本正常，但存在两个问题：

• 路由已加载对应组件，但需点击组件区域才会激活该路由项，想去掉这额外的点击操作
• 桌面端点击组件区域时侧边栏会意外关闭（桌面端应保持展开，仅移动端需关闭），已设置fixedInViewport属性但未解决

解决方案 #

1. 自动激活对应路由项 #

当前靠手动click事件触发路由跳转，且未绑定路由激活状态，导致路由加载后导航项不会自动高亮。改用Angular Router的routerLink和routerLinkActive指令即可解决：

修改导航项代码：

<a
  *ngFor="let route of routes"
  mat-list-item
  [routerLink]="route.path"
  routerLinkActive="mat-list-item-active"
>
  {{ route.label }}
</a>

同时删除组件里的selectNavItem方法，routerLink会自动处理路由跳转，routerLinkActive会在路由匹配时自动添加mat-list-item-active样式（Angular Material内置的激活样式）。

如果需要在路由切换后执行额外逻辑，可订阅路由事件：

import { Router, NavigationEnd } from '@angular/router';
import { filter } from 'rxjs/operators';

constructor(private router: Router) {}

ngOnInit() {
  this.router.events.pipe(
    filter(event => event instanceof NavigationEnd)
  ).subscribe(() => {
    // 路由切换完成后的自定义逻辑
  });
}

2. 避免桌面端侧边栏意外关闭 #

当前hasBackdrop设为全局true，桌面端点击背景也会触发侧边栏关闭，同时要确保opened状态仅在移动端可修改：

1. 仅在移动端启用背景：

<mat-sidenav-container [hasBackdrop]="isMobile" autosize>

2. 控制侧边栏关闭逻辑，仅允许移动端关闭：
   如果有手动修改opened状态的方法（比如openCollapsed()），需添加移动端判断：

closeSidenav() {
  if (this.isMobile) {
    this.opened = false;
  }
}

注意：fixedInViewport仅控制侧边栏是否固定在视口，不影响打开/关闭逻辑，所有修改opened状态的地方都要判断当前是否为移动端。

内容的提问来源于stack exchange，提问作者LeO