Angular自定义指令获取当前路由：console.log为何触发三次？求最优方案

嘿，我来帮你理清楚这个问题！你看到console.log执行三次，是因为Angular的Router.events会在路由导航的不同阶段触发多种类型的事件——比如NavigationStart（导航开始）、RoutesRecognized（路由已识别）、NavigationEnd（导航完成）这些，每次完整的导航流程都会依次触发多个事件，所以你的订阅会收到多次数据，自然就打印了三次。

更好的实现方法 #

如果你只关心最终激活的路由（也就是导航完成后的URL），可以通过以下两种方式优化：

1. 过滤出NavigationEnd事件（推荐，支持路由变化响应）

这种方式只会在导航真正完成时获取URL，而且能响应后续的路由变化（比如从/game/list跳转到/game/detail）。需要先导入对应的操作符和事件类型：

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

然后修改指令的ngOnInit方法：

ngOnInit(): void {
  this.route.events.pipe(
    // 只保留导航完成的事件
    filter(event => event instanceof NavigationEnd)
  ).subscribe((event: NavigationEnd) => {
    console.log('当前激活路由URL:', event.url);
    // 这里可以根据你的pathKey匹配逻辑设置元素类名
    this.elementClass = event.url.includes(this.pathKey) ? 'active' : '';
  });
}

2. 获取路由快照（仅初始加载时生效）

如果你的场景不需要响应后续的路由变化，只是在指令初始化时获取一次当前路由，可以直接用路由快照：

ngOnInit(): void {
  const currentUrl = this.route.routerState.snapshot.url;
  console.log('当前激活路由URL:', currentUrl);
  this.elementClass = currentUrl.includes(this.pathKey) ? 'active' : '';
}

另外提一句，你在模板里已经用了routerLinkActive，如果只是为了给菜单添加激活类，其实可以直接用这个内置指令，但如果有自定义的匹配逻辑（比如根据pathKey模糊匹配），上面的自定义指令实现就很合适啦。

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