如何在新标签页路由组件时传递不显示在URL中的额外数据？

下面提供两种可行的实现方式，都能满足不把evType暴露在URL中的需求：

方法1：利用SessionStorage临时存储（推荐） #

同域下新标签页可以直接访问父页面存入的sessionStorage，适合这种临时传参场景：

1. 修改点击事件代码，在打开新页面前存入evType：

btnOpsE2EHistoryClick(uniqueID: string, evType: string) {
   console.log('E2E history for event: ' + evType + ' - UniqueID: ' + uniqueID);
   // 存入sessionStorage，标签页关闭后自动清除
   sessionStorage.setItem('e2e_evType', evType);
   const navUrl = environment.siteURL + 'e2e-history/';
   window.open(navUrl + uniqueID, '_blank');
}

2. 在E2eHistoryComponent的初始化钩子中读取并清理数据：

import { ActivatedRoute } from '@angular/router';
// ...

constructor(private route: ActivatedRoute) {}

ngOnInit(): void {
  // 读取evType
  const evType = sessionStorage.getItem('e2e_evType');
  if (evType) {
    // 这里写处理evType的业务逻辑
    console.log('获取到的evType:', evType);
    // 读取后立即删除，避免其他页面误读取
    sessionStorage.removeItem('e2e_evType');
  }

  // 继续从路由获取uniqueID
  const uniqueID = this.route.snapshot.paramMap.get('id');
}

方法2：通过window.postMessage跨页面通信 #

如果不想用本地存储，可以用浏览器的跨页面通信API，需要注意验证消息来源：

1. 修改点击事件，监听新窗口加载完成后发送消息：

btnOpsE2EHistoryClick(uniqueID: string, evType: string) {
   console.log('E2E history for event: ' + evType + ' - UniqueID: ' + uniqueID);
   const navUrl = environment.siteURL + 'e2e-history/';
   const newWindow = window.open(navUrl + uniqueID, '_blank');

   // 轮询检查新窗口是否加载完成
   const loadChecker = setInterval(() => {
     if (newWindow?.document.readyState === 'complete') {
       // 发送消息，指定允许接收的域名
       newWindow.postMessage({ evType }, environment.siteURL);
       clearInterval(loadChecker);
     }
   }, 100);
}

2. 在E2eHistoryComponent中监听消息：

import { ActivatedRoute } from '@angular/router';
// ...

constructor(private route: ActivatedRoute) {}

ngOnInit(): void {
  // 监听跨页面消息
  window.addEventListener('message', (event) => {
    // 验证消息来源，防止恶意攻击
    if (event.origin !== environment.siteURL) return;
    
    const evType = event.data.evType;
    if (evType) {
      // 处理evType的业务逻辑
      console.log('通过postMessage获取的evType:', evType);
    }
  });

  // 获取路由中的uniqueID
  const uniqueID = this.route.snapshot.paramMap.get('id');
}

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