如何捕获a标签的路由事件，解决target="_blank"跳转无事件触发问题

原因说明 #

带有target="_blank"的<a>标签跳转是浏览器原生行为，不会触发Angular Router的内部路由逻辑，所以你现有的router.events监听收不到对应事件属于正常情况。

解决方案 #

通过全局监听点击事件即可捕获这类a标签的跳转行为，无需修改现有业务中的a标签代码：

1. 保留原有Router监听逻辑处理内部路由跳转
2. 新增全局点击监听，拦截所有target="_blank"的a标签跳转

完整实现代码如下：

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  constructor(private router: Router) {}

  ngOnInit(): void {
    // 原有内部路由跳转监听逻辑不变
    this.router.events.pipe(
      filter(event => event instanceof NavigationStart)
    ).subscribe(event => {
      this.saveBrowseHistory(event.url);
    });
  }

  // 使用Angular HostListener绑定全局点击事件，也可以手动调用document.addEventListener实现
  @HostListener('document:click', ['$event'])
  handleGlobalClick(e: MouseEvent): void {
    // 查找点击元素最近的a标签，适配a标签内嵌套子元素的场景
    const targetEl = e.target as HTMLElement;
    const aTag = targetEl.closest('a');
    if (!aTag) return;

    // 匹配新开标签页的跳转
    if (aTag.target === '_blank' && aTag.href) {
      // 可按需添加过滤逻辑：比如判断aTag.host === window.location.host 仅采集内部域名跳转
      this.saveBrowseHistory(aTag.href);
    }
  }

  // 你原有存储浏览历史的业务逻辑
  private saveBrowseHistory(url: string): void {
    // 此处实现存储逻辑
  }
}

方案特点 #

• 适配全局所有静态、动态生成的a标签（包括富文本渲染的a标签）
• 与原有Router监听逻辑互补，可覆盖应用所有跳转场景
• 可灵活扩展过滤规则，按需屏蔽第三方外部站跳转采集

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