Angular组件间数据传递异常：Dialog向Payments组件传值无响应

你遇到的问题核心在于**Subject的特性**：它是冷Observable，只会向订阅发生时已存在的观察者推送数据。

你的代码执行顺序是：

1. 调用router.navigate触发路由跳转，此时Payments组件还未初始化，更没有完成订阅
2. 调用communicateDueDatetoPayments发送数据，但此时Payments组件的订阅还没建立，所以接收不到

方案一：改用BehaviorSubject（推荐） #

BehaviorSubject会保存最新的推送值，新订阅的观察者会立即收到这个最新值，完美适配路由跳转后的组件数据传递场景。

修改共享Service：

// 共享Service代码
import { BehaviorSubject } from 'rxjs';

sendDueDatetoPayments = new BehaviorSubject<any>(null); // 初始化值设为null，后续可过滤

communicateDueDatetoPayments(msg) {
  this.sendDueDatetoPayments.next(msg);
}

Payments组件订阅时过滤初始的null值：

listenDueDateRes() {
  this.dueDateSubscription = this.sharedService.sendDueDatetoPayments.subscribe((res: any) => {
    if (res) {
      console.log(res);
      this.dueDateTransactionList = res;
    }
  });
}

方案二：改用ReplaySubject #

如果不需要初始值，只想让新订阅者收到最近的1次推送数据，可以用ReplaySubject：

// 共享Service代码
import { ReplaySubject } from 'rxjs';

sendDueDatetoPayments = new ReplaySubject<any>(1); // 保存最近1次推送的数据

communicateDueDatetoPayments(msg) {
  this.sendDueDatetoPayments.next(msg);
}

方案三：调整路由跳转后的执行时机（不推荐） #

如果坚持用Subject，可以等路由跳转完成后再发送数据，但这种方式依赖路由跳转的异步完成时机，稳定性较差：

// Dialog组件代码
dialogRef.afterClosed().subscribe(confirm => {
  if (confirm) {
    this.dialogRef.close();
    let navigationUrl = "unit-details/payments"; 
    this.router.navigate([navigationUrl], { queryParams: { tid: this.customerTransactionInfo.customerTransactionId } })
      .then(() => {
        // 路由跳转完成后再发送数据
        this.sharedService.communicateDueDatetoPayments(this.dueDateUpdatedTransctions);
      });
  }
});

• 确保共享Service是全局单例：在Service上添加@Injectable({ providedIn: 'root' })，避免因多个Service实例导致数据传递失败。
• 若使用BehaviorSubject，可在Payments组件销毁前调用this.sharedService.sendDueDatetoPayments.next(null)，避免下次进入组件时收到旧数据。

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