如何根据路由路径修改Angular导航元素样式？

这个问题我之前也踩过坑——靠点击事件维护选中状态确实会有刷新页面后状态跑偏的情况，毕竟组件重新初始化时selected变量会回到初始值，和当前路由对不上。下面给你两个靠谱的解决方案：

方案一：用官方自带的RouterLinkActive指令（最推荐） #

Angular Router本身就提供了RouterLinkActive指令，它会自动给当前匹配的路由链接添加指定的CSS类，完全不用自己手动维护状态变量，省心又可靠。

只需要修改你的导航HTML代码：

<nav>
  <a routerLink="/hello" routerLinkActive="selected">Hello</a>
  <a routerLink="/world" routerLinkActive="selected">World</a>
</nav>

• 不管是通过点击链接跳转，还是直接刷新页面，当前路由对应的链接都会自动加上selected类，和你的CSS样式完美配合。
• 如果需要精确匹配路由（比如避免子路由激活父级链接的情况），可以加上routerLinkActiveOptions：

  <a routerLink="/hello" routerLinkActive="selected" [routerLinkActiveOptions]="{ exact: true }">Hello</a>
  

这个方案完全不需要你原来的selected变量和setSelected方法，直接删掉就行，代码简洁还不容易出错。

方案二：手动监听路由变化同步状态 #

如果你有自定义的逻辑，不想用RouterLinkActive，可以通过订阅路由事件来实时同步selected变量：

1. 先在组件中注入Router服务：

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

@Component({
  // ... 组件元数据
})
export class YourParentComponent {
  selected: string = '';

  constructor(private router: Router) {}

  ngOnInit(): void {
    // 初始化时获取当前路由路径
    const currentPath = this.router.url.split('/')[1]; // 从 "/world" 提取出 "world"
    this.selected = currentPath;

    // 监听路由变化，实时更新选中状态
    this.router.events.pipe(
      filter(event => event instanceof NavigationEnd) // 只监听导航完成的事件
    ).subscribe((event: NavigationEnd) => {
      const currentPath = event.url.split('/')[1];
      this.selected = currentPath;
    });
  }
}

2. 然后修改导航HTML，去掉多余的click事件：

<nav>
  <a routerLink="/hello" [class.selected]="selected === 'hello'">Hello</a>
  <a routerLink="/world" [class.selected]="selected === 'world'">World</a>
</nav>

这样不管页面怎么刷新，selected变量都会和当前路由保持一致，选中状态就不会出错了。另外提一句，你之前的click事件里把world写成了wolrd，这个小错误也会导致状态不对，用路由监听的话就彻底避免了这类问题。

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