Angular中BehaviorSubject订阅异常、数据传递为null及银行支付API completeUrl设置问题

我来帮你逐个解决这两个问题：

问题1：BehaviorSubject订阅返回[object Object]且接收组件数据为null #

核心原因 #

1. 跨页面状态丢失：你用window.open打开了银行支付的新窗口，当银行回调跳转回你的组件时，原来的Angular应用实例已经被销毁了——BehaviorSubject是内存中的状态管理工具，新页面的DataService实例初始值还是null，自然拿不到之前存储的数据。
2. [object Object]显示问题：alert(data)会直接把对象转为默认字符串，所以看到的是[object Object]，这不是异常，只是没正确展示对象内容。

修复方案 #

第一步：改用持久化存储保存支付数据

把DataService改成结合localStorage的方式，这样数据能跨页面留存：

import { Injectable } from '@angular/core';
import { BehaviorSubject, Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class DataService {
  private sharedData = new BehaviorSubject<any>(null);

  constructor() {
    // 组件初始化时，先从localStorage读取之前保存的支付数据
    const savedPaymentData = localStorage.getItem('paymentTransactionData');
    if (savedPaymentData) {
      this.sharedData.next(JSON.parse(savedPaymentData));
    }
  }

  getData(): Observable<any> {
    return this.sharedData.asObservable();
  }

  setData(data: any): void {
    // 同时把数据存入localStorage和BehaviorSubject
    localStorage.setItem('paymentTransactionData', JSON.stringify(data));
    this.sharedData.next(data);
  }
}

第二步：正确展示订阅到的数据

在接收组件里，不要直接alert对象，改成展示具体内容：

ngOnInit(): void {
  this.dataService.getData().pipe(
    filter(data => !!data)
  ).subscribe(data => {
    // 方案1：转成格式化的JSON字符串查看完整数据
    alert(JSON.stringify(data, null, 2));
    // 方案2：直接访问你需要的字段，比如交易ID
    // alert(`交易ID：${data.paymentId}`);
  });
}

问题2：银行支付回调的completeUrl配置要求 #

银行要求的completeUrl需要满足以下几点：

• 必须是绝对URL：比如https://你的域名.com/payment-success，不能用相对路径（比如/payment-success），因为银行的支付页面是顶层窗口，重定向需要明确的完整地址。
• 指向你Angular应用的回调组件路由：这个路由对应的组件就是你用来展示交易数据的接收组件，需要提前在Angular路由模块中配置好（比如{ path: 'payment-success', component: PaymentSuccessComponent }）。
• 支持接收银行回调参数：银行一般会把交易状态、交易ID等参数通过URL Query传递过来，你的回调组件需要能够解析这些参数（比如用ActivatedRoute获取queryParams），结合之前存在localStorage的数据完成交易展示。

另外，你需要在调用SecondBakednURL接口时，把这个completeUrl传递给后端，让后端在请求银行支付跳转地址时，将其作为回调地址提交给银行API（具体参数名要看银行API文档，一般叫returnUrl或completeUrl）。

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