CODEWITHSUNDEEP
angularrxjsbehaviorsubjectsubject
Mike Twain
Mike Twain

Reputation: 171

how to properly reset rxjs Subject after refresh of page

In my Angular App i tried to implement some logic for the refresh of my App. But i am having trouble when resetting the BehaviourSubject that i use, meaning that after it emits a value, i execute some logic and then i reset the value and complete it. But still the value is the same as the one emitted and not the initial value.

in my app.component i catch the refresh event and emit the value true:

    this.router.events.pipe(
  filter(event => event instanceof NavigationStart),
  tap(event => {
    const browserRefresh = !this.router.navigated;
    const currentUrl = event instanceof RouterEvent && event.url;
    if (browserRefresh && currentUrl.includes('/private')) {
this.privateComponentService.privateRouteRefreshedSubject.next(true);
    }
  })
).subscribe();

My PrivateComponentService contains the Subject:

privateRouteRefreshedSubject: BehaviorSubject<boolean | null> = new BehaviorSubject<boolean | null>(null);

And in my PrivateComponent i subscribe to the Subject in the ngOnInit Hook:

    this.privateComponentService.privateRouteRefreshedSubject.pipe(
  take(1)
).subscribe(privateRouteRefresh => {
  console.log('privateRouteRefresh is ', privateRouteRefresh)
  if (privateRouteRefresh) {
    this.loadPreviewComponents();
    this.privateComponentService.privateRouteRefreshedSubject.next(null);
  } else {
    this.initComponentContainer()
  }
})

What i want and thought it would do is, catch the first emitted value and on refreshing the page, it will be true, execute the logic and loadPreviewComponents() and then reset the value to null and complete, so that the subscriber will not get any more values. When ngOnInit() is then executed again and there is no refresh on the page, i would expect the subscription to execute again but this time the value of privateRouteRefresh is null, since i resetted it after the first refresh. But that is not the case. The value of privateRouteRefresh will remain true(even after routing to a different route and rerouting back to /private).

What is wrong about my thought process and how to solve the issue best?

Upvotes: 1

Views: 214

Answers (1)

Naren Murali
Naren Murali

Reputation: 57986

You need to use a service, with providedIn as root, then initialize a service property to undefined. When the screen loads the property will be undefined. Use this property to perform the logic, then inside the same if condition. initialize the property to some value. Future iterations of logic will always contain a value, unless the screen is refreshed, this will solve your problem.

@Injectable({
    providedIn: 'root',
})
export class SomeService {
    notFirstLoad: boolean;
}

Then the place you want to run the logic will contain.

if(this.someService.notFirstLoad === undefined) {
    // perform app refresh logics
    this.someService.notFirstLoad = true;
} else {
    // perform default logics
}

Upvotes: 1

Related Questions