手动输入或刷新页面时Angular路由失效，菜单激活状态错误如何解决

你的代码执行时机不符合预期：ngOnInit 触发时 Angular 路由还未完成初始导航解析，此时 router.url 拿到的通常是初始值 /，而非刷新后的实际路由地址，所以匹配不到非首页的菜单项，不会设置对应 isSelect 为 true，最终就保留了默认的首个菜单项激活状态。

方案1：使用Angular内置RouterLinkActive指令（推荐） #

不需要手动维护 isSelect 状态，Angular 官方已经封装好了路由激活的判断逻辑，直接调用即可。参考模板代码：

<li 
  *ngFor="let m of menu"
  [routerLink]="m.link"
  [routerLink]="'你的激活样式类名'"
>
  {{ m.name }}
</li>

如果需要精确匹配（避免子路由也激活父菜单），额外添加配置项 [routerLinkActiveOptions]="{exact: true}" 即可。

方案2：监听路由事件修正手动判断逻辑 #

如果你确实需要自行维护 isSelect 状态，就监听路由的 NavigationEnd 事件，等导航完全完成后再做匹配。参考组件代码：

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

export class MenuComponent implements OnInit, OnDestroy {
  private routerSub?: Subscription;

  constructor(private router: Router) {}

  ngOnInit(): void {
    // 只监听导航完成事件
    this.routerSub = this.router.events.pipe(
      filter(event => event instanceof NavigationEnd)
    ).subscribe(() => {
      // 先重置所有选中状态
      this.menu.forEach(m => m.isSelect = false);
      // 匹配当前路由对应菜单项
      const activeMenu = this.menu.find(m => this.router.url === m.link);
      if (activeMenu) {
        activeMenu.isSelect = true;
      }
    });
  }

  ngOnDestroy(): void {
    // 销毁订阅避免内存泄漏
    this.routerSub?.unsubscribe();
  }
}

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