Angular中Subject偶发重复推送数据 已用takeUntil取消订阅仍无效

问题产生原因 #

• ngOnDestroy执行顺序错误：当前你在ngOnDestroy中先调用了complete()再调用next()，逻辑完全颠倒。takeUntil只有接收到unsubscribe$的next信号才会触发订阅取消，你先把unsubscribe$终止了，后续的next信号根本发不出去，导致旧组件的订阅没有被真正销毁，再次进入组件时新旧两个订阅同时生效，就会出现两次触发的现象。
• 嵌套订阅导致内存泄漏风险：你在isReportMode$的订阅回调里又嵌套了弹窗afterClosed()的订阅，即使外层订阅正常取消，内层订阅也有可能残留，叠加未销毁的旧订阅会进一步放大重复触发的问题。
• （可选触发条件）你的RegistryReportService是全局单例，切换组件时服务不会被销毁，reportMode$的状态会持续保留，新组件订阅后也会收到服务推送的状态，和未销毁的旧订阅叠加就会出现重复回调。

解决方法 #

1. 修复ngOnDestroy的执行顺序 #

将next()放在complete()之前，确保takeUntil能收到取消信号，正常销毁所有关联订阅：

ngOnDestroy() {
    this.unsubscribe$.next();
    this.unsubscribe$.complete();
}

同时确认unsubscribe$是当前组件的私有实例，不要在多个组件之间共享：

private unsubscribe$ = new Subject<void>();

2. 替换嵌套订阅为switchMap #

用RxJS操作符switchMap替代嵌套订阅，内层的弹窗订阅会自动跟随外层订阅销毁，不需要单独加取消逻辑，代码更简洁也更安全：

constructor() {
    this.isReportMode$ = this.mapLibrary.reonMap.registryReportService.reportMode$;
    this.isToogleLabelMode$ = this.mapLibrary.reonMap.registryReportService.toggleLabels$;

    this.isReportMode$
        .pipe(
            takeUntil(this.unsubscribe$),
            filter((on) => on),
            switchMap((on) => {
                console.log(on);
                this.mapLibrary.reonMap.registryReportService.initialize(
                    this.registry,
                    this.registryService.getRegistryBoundaries(this.registry.Id),
                    this.registryService,
                );
                return this.mapLibrary.reonMap.dialogService
                    .open(DialogReportPropertiesComponent, {
                        width: '500px',
                        height: '500px',
                        disableClose: true,
                        position: { top: '10px', right: '10px' },
                        data: {
                            map: this.mapLibrary.reonMap,
                        },
                    })
                    .afterClosed();
            })
        )
        .subscribe();
}

3. （可选）优化服务的状态流 #

如果你需要组件每次初始化时都能拿到最新的reportMode状态，可以把普通Subject替换为BehaviorSubject，初始化时传入默认值即可：

export class RegistryReportService {
    public reportModeStatus = false;
    public reportMode$ = new BehaviorSubject<boolean>(false);
    
    public toggleMode(): void {
        this.reportModeStatus = !this.reportModeStatus;
        this.reportMode$.next(this.reportModeStatus);
    }
}

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