Why subject emits data some times?

Admin 1
Viewed 65

We need your thoughts.

There is a code in the constructor of the component - which listens for the mode of enabling the isReportMode$ report from the service.

When switching to another component and returning back, the isReportMode$ variable pushes the value twice.

The dialog box opens twice. Although in the destructor I unsubscribe via takeUntil.

Component is:

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

        this.isReportMode$
            .pipe(
                takeUntil(this.unsubscribe$),
                filter((on) => on),
            )
            .subscribe((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();
            });
    }
}

Unsubscription in component:

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

Service is:

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

}

So, when I leave a component then come in again the dialog is opened the same time: console.log(on);.

What is problem?

Also I have tried to unsubscribe from dialog stteam here:

.afterClosed().pipe(takeUntil(this.unsubscribe$)).subscribe();

There is not effect

rxjs angular
2 Answers

That happens because the unsubscribe$ observable is completed before emitting any value, so the emitted value after that will be ignored because the provided observable is completed.

takeUntil:

Emits the values emitted by the source Observable until a notifier Observable emits a value.

So, in the ngOnDestroy function, you can just swap between the next and complete calls to resolve it.

user_151596030

Aside: removing nested subscriptions

this.isReportMode$.pipe(
  takeUntil(this.unsubscribe$),
  filter(on => on),

  tap(on => {
    console.log(on);
    this.mapLibrary.reonMap.registryReportService.initialize(
      this.registry,
      this.registryService.getRegistryBoundaries(this.registry.Id),
      this.registryService
    );
  }),

  mergeMap(_ => 
    this.mapLibrary.reonMap.dialogService.open(
      DialogReportPropertiesComponent, 
      {
        width: '500px',
        height: '500px',
        disableClose: true,
        position: { top: '10px', right: '10px' },
        data: {
            map: this.mapLibrary.reonMap,
        },
      }
    ).afterClosed()

  )
).subscribe();
user_135009860
Related