Angular 12 SPA中跟踪脚本如何获取当前路由并全局触发？

由于Angular是单页应用（SPA），路由切换不会刷新整个页面，你的原始脚本只会在首次页面加载时执行一次，后续路由变化时无法自动触发。下面提供两种可行的解决思路：

方案一：在Angular应用内集成（推荐，适配Angular生态） #

直接在Angular组件中监听路由导航完成事件，每次路由切换时执行跟踪逻辑：

1. 在根组件（app.component.ts）中导入所需依赖：

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

2. 注入Router并监听NavigationEnd事件：

constructor(private router: Router) {
  // 过滤出仅路由导航完成的事件
  this.router.events.pipe(
    filter(event => event instanceof NavigationEnd)
  ).subscribe((event: NavigationEnd) => {
    // 执行页面跟踪逻辑，传入最终跳转后的路由地址
    this.trackPageView(event.urlAfterRedirects);
  });
}

// 封装跟踪脚本逻辑
private trackPageView(url: string) {
  const ds = document.getElementsByTagName('script')[0];
  const dm = document.createElement('img');
  dm.width = 1;
  dm.height = 1;
  dm.alt = ' ';
  // 对URL进行编码，避免特殊字符导致请求异常
  dm.src = `https://example.com/url=${encodeURIComponent(url)}`;
  ds.parentNode.insertBefore(dm, ds);
}

方案二：在独立JS文件中实现（兼容原有脚本部署方式） #

如果需要保持跟踪脚本在独立JS文件中，可以通过Angular派发全局事件+监听浏览器历史变化的方式实现：

1. 先在Angular根组件中添加全局事件派发：

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

constructor(private router: Router) {
  this.router.events.pipe(
    filter(event => event instanceof NavigationEnd)
  ).subscribe((event: NavigationEnd) => {
    // 派发自定义全局事件，传递当前路由地址
    window.dispatchEvent(new CustomEvent('angularRouteChange', { 
      detail: event.urlAfterRedirects 
    }));
  });
}

2. 修改你的独立JS文件，添加事件监听：

// 首次加载执行一次跟踪
trackPageView(window.location.href);

// 监听Angular路由变化的自定义事件
window.addEventListener('angularRouteChange', (e) => {
  trackPageView(e.detail);
});

// 监听浏览器前进/后退的历史变化事件
window.addEventListener('popstate', () => {
  trackPageView(window.location.href);
});

// 封装跟踪逻辑
function trackPageView(url) {
  const ds = document.getElementsByTagName('script')[0];
  const dm = document.createElement('img');
  dm.width = 1;
  dm.height = 1;
  dm.alt = ' ';
  dm.src = `https://example.com/url=${encodeURIComponent(url)}`;
  ds.parentNode.insertBefore(dm, ds);
}

关键注意事项 #

• 使用encodeURIComponent对路由地址编码，避免URL中的特殊字符（如?、#）导致请求参数异常。
• event.urlAfterRedirects能获取到路由跳转后的最终地址，比直接用window.location.href更准确（尤其是存在路由重定向的场景）。
• 若你的Angular应用使用HashLocationStrategy（URL带#），popstate事件依然会触发，但通过Angular的NavigationEnd事件监听更可靠。

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