如何在不绑定(click)事件的情况下，在导航过程中获取点击的routerLink DOM元素？

当然可以做到，不用绑定额外的(click)事件，完全能在Angular路由的导航流程里拿到触发导航的元素，而且能适配你做可复用组件的需求——不用在每个组件里加额外逻辑，只靠routerLink就行。

两种可行的实现思路 #

• 全局点击监听+路由事件联动：
  先在全局（比如根组件或者单独的服务里）加个点击事件监听，每次点击页面元素时，判断这个元素（或者它的父元素）有没有routerLink属性。如果有，就先把这个元素存起来。然后订阅路由的NavigationStart事件，每次导航开始时，就能拿到刚才存的那个触发导航的元素，想怎么操作都行。
• 结合路由守卫使用：
  如果你需要在导航的某个阶段（比如导航前、导航后）处理元素，可以把上面存元素的逻辑和路由守卫结合起来。比如在CanActivate守卫里，拿到之前存的元素，做校验或者样式修改之类的操作。

实操代码示例 #

比如在根组件里写这段逻辑：

import { Component, OnInit } from '@angular/core';
import { Router, NavigationStart } from '@angular/router';

@Component({
  selector: 'app-root',
  template: `<router-outlet></router-outlet>`
})
export class AppComponent implements OnInit {
  private lastRouterLinkEl: HTMLElement | null = null;

  constructor(private router: Router) {}

  ngOnInit(): void {
    // 全局监听点击，记录带routerLink的元素
    document.addEventListener('click', (e) => {
      const target = e.target as HTMLElement;
      this.lastRouterLinkEl = target.closest('[routerLink]') as HTMLElement || null;
    });

    // 监听导航开始事件，获取触发元素
    this.router.events.subscribe(event => {
      if (event instanceof NavigationStart && this.lastRouterLinkEl) {
        // 这里就能访问到那个button元素了
        console.log('触发导航的元素:', this.lastRouterLinkEl);
        // 比如给它加个临时样式
        this.lastRouterLinkEl.classList.add('nav-clicked');
        // 处理完清空，避免干扰下一次导航
        setTimeout(() => {
          this.lastRouterLinkEl?.classList.remove('nav-clicked');
          this.lastRouterLinkEl = null;
        }, 300);
      }
    });
  }
}

适配可复用组件的优势 #

这种方式是全局层面的逻辑，不管你是直接写的带routerLink的button，还是封装成可复用组件（比如<my-button routerLink="/account">），都能自动被捕获到，完全不用在组件里加额外的(click)或者其他逻辑，完美满足你的需求。你也可以把这段逻辑封装成一个独立的服务，在应用初始化时注入，这样代码更干净，也方便维护。

内容的提问来源于stack exchange，提问作者Michał B