Angular 14中BehaviorSubject订阅多次触发及值未定义问题

问题场景 #

在Angular 14项目中，主组件通过BehaviorSubject（也曾尝试Subject）发射布尔值，点击更新按钮时根据条件传递true/false；另一个组件订阅该Observable，用来控制行的显示隐藏。

遇到两个问题：

• 主组件仅调用一次发射方法，但订阅组件多次触发订阅回调，收到重复的false/true值
• 首次访问组件内的this.ispreFundEdited时为undefined，之后才能获取到正确的布尔值

相关代码 #

service.ts（BehaviorSubject版本） #

public sendToRenderer = new BehaviorSubject<boolean>(true);
public recievedData = this.sendToRenderer.asObservable();
changeData(data: boolean) {
  this.sendToRenderer.next(data)
}

service.ts（Subject版本，测试结果相同） #

public sendToRenderer = new Subject<boolean>();
public recievedData = this.sendToRenderer.asObservable();
changeData(data: boolean) {
  this.sendToRenderer.next(data)
}

主组件 main component.ts #

onUpdate(e: any) {
  this.uploadService.changeData(this.isRemarksUpdated)
  // this.isRemarksupdated 由其他方法返回true/false
}

其他组件 other component.ts #

ngOnInit(): void {
  this.subscripition = this.uploadService.recievedData.subscribe((data)=>{
    this.ispreFundEdited = data
  })
}

曾尝试在订阅时添加.pipe(take(1))，但无法解决重复触发问题。

问题原因与解决方法 #

1. 订阅重复触发的解决 #

原因分析

• 组件重复订阅未销毁：如果other component被多次实例化（比如路由复用、组件在页面多处渲染），每次实例化都会在ngOnInit中创建新订阅，旧订阅未清理就会导致同一值被多次接收。
• 按钮事件重复绑定：主组件中onUpdate方法可能被多次绑定到按钮点击事件，导致每次点击实际调用多次changeData，进而重复发射值。

解决方式

• 手动销毁订阅：在组件的ngOnDestroy钩子中取消订阅，避免内存泄漏和重复触发：

import { Subscription } from 'rxjs';

export class OtherComponent implements OnInit, OnDestroy {
  subscripition!: Subscription;
  ispreFundEdited?: boolean;

  ngOnInit(): void {
    this.subscripition = this.uploadService.recievedData.subscribe((data)=>{
      this.ispreFundEdited = data
    })
  }

  ngOnDestroy(): void {
    this.subscripition?.unsubscribe();
  }
}

• 使用async管道：让Angular自动管理订阅生命周期，无需手动销毁，同时避免重复订阅：
  在组件模板中直接使用async管道绑定数据：

<div *ngIf="uploadService.recievedData | async">
  <!-- 需要显示/隐藏的行内容 -->
</div>

组件类中无需手动编写订阅代码，彻底避免订阅管理问题。

• 检查事件绑定：确认主组件按钮的点击事件只绑定了一次onUpdate，比如避免模板中重复写(click)="onUpdate($event)"，或代码中多次添加事件监听。

2. 首次ispreFundEdited为undefined的解决 #

原因分析

• 使用Subject时，新订阅不会收到订阅前发射的值，若组件初始化后还未调用changeData，ispreFundEdited会保持初始的undefined状态。
• 使用BehaviorSubject时虽会发射初始值true，但如果组件类中未给ispreFundEdited设置初始值，首次访问时仍会显示undefined。

解决方式

• 设置组件属性初始值：在组件类中给ispreFundEdited赋值，和BehaviorSubject的初始值保持一致：

ispreFundEdited: boolean = true; // 与BehaviorSubject初始值匹配

• 直接获取BehaviorSubject当前值：如果需要在订阅前获取当前值，可调用BehaviorSubject的getValue()方法：

ngOnInit(): void {
  // 先获取当前值，再订阅后续更新
  this.ispreFundEdited = this.uploadService.sendToRenderer.getValue();
  this.subscripition = this.uploadService.recievedData.subscribe((data)=>{
    this.ispreFundEdited = data
  })
}

注意：该方法仅适用于BehaviorSubject，Subject没有此方法。

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