如何通过ui-router向子窗口传递参数？附当前实现代码

你这个思路其实已经很靠谱了——用Angular的$state.href生成目标路由的URL，再通过$window.open打开新窗口，完全符合这类父传子窗口带参场景的常规玩法。我来给你补充几个关键细节和优化方向，让这个实现更稳：

• 复杂参数的序列化处理
  你当前传递的params和options如果是复杂对象，直接通过路由参数传递的话，可能会因为URL序列化规则导致数据丢失或者URL过长的问题。建议先把这些复杂对象序列化为JSON字符串再传递：

  // 父窗口点击方法中序列化复杂参数
  const serializedParams = JSON.stringify(params);
  const serializedOptions = JSON.stringify(options);
  
  // 生成带序列化参数的路由URL
  const location = this.$state.href('moveout', {
    entityUuid: this.entityUuid,
    count: count,
    params: serializedParams,
    options: serializedOptions
  });
  

  然后在子窗口对应的moveout路由控制器里，再把参数解析回原对象：

  // 子窗口控制器中解析参数
  const params = JSON.parse(this.$state.params.params);
  const options = JSON.parse(this.$state.params.options);
  

• 避免浏览器拦截弹出窗口
  很多浏览器会拦截非用户主动同步触发的弹出窗口，如果你的计算逻辑是异步的（比如需要请求后端接口获取数值），直接在异步回调里调用$window.open大概率会被拦截。可以换个方式：

  // 第一步：在用户点击的同步流程里先创建空窗口
  const unDockedWindow = this.$window.open('', '', 'scrollbars=no,fullscreen=yes,toolbar=no,menubar=no');
  
  // 第二步：执行你的计算/异步请求逻辑
  this.getCalculatedValues().then(({count, params, options}) => {
    const serializedParams = JSON.stringify(params);
    const serializedOptions = JSON.stringify(options);
    const location = this.$state.href('moveout', {
      entityUuid: this.entityUuid,
      count: count,
      params: serializedParams,
      options: serializedOptions
    });
    // 第三步：给空窗口设置目标URL
    unDockedWindow.location.href = location;
  });
  

  这样因为窗口是在用户点击的同步动作中创建的，浏览器会认为是用户主动操作，不会拦截。

• 敏感参数的安全传递方案
  如果你的参数包含敏感信息，绝对不要通过URL传递（URL会留在浏览器历史、服务器日志里，有泄露风险）。可以用sessionStorage暂存参数，子窗口读取后立即删除：

  // 父窗口点击时暂存参数
  const tempKey = `moveout_temp_${Date.now()}`;
  sessionStorage.setItem(tempKey, JSON.stringify({
    entityUuid: this.entityUuid,
    count: count,
    params: params,
    options: options
  }));
  
  // 生成带临时密钥的路由URL
  const location = this.$state.href('moveout', { tempKey });
  const unDockedWindow = this.$window.open(location, '', 'scrollbars=no,fullscreen=yes');
  

  子窗口控制器中读取并清理：

  // 子窗口控制器中获取参数
  const tempKey = this.$state.params.tempKey;
  const transferData = JSON.parse(sessionStorage.getItem(tempKey));
  // 用完立即删除，避免残留
  sessionStorage.removeItem(tempKey);
  
  // 解构使用参数
  const { entityUuid, count, params, options } = transferData;
  

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