How to handle Browser Refresh action on Angular 5?

Question

Currently, I am trying to detect browser refresh event (with F5) and then re-initialize page state once. I simply checked the router events, i.e. if the first event type is NavigationStart and event id is 1, I think a user pressed browser Refresh F5 button.

Sample code shown in below. However, it looks strange. are there any better way to archive the same goal? or any suggestions? thanks

export class AppComponent implements OnInit{

   constructor(private  router: Router) {
     this.router.events.pairwise().subscribe((events: any[]) => {
       if (events[0] instanceof NavigationStart
             && events[0].id === 1 && events[1].id === 1) {

             // re-initialize page sate . . .
    }
  });

}

Answer 1

I tried below code to check browser reload.

constructor(private router: Router) {

   this.subscription = router.events.subscribe((event) => {
    if (event instanceof NavigationStart) {
      browserRefresh = !router.navigated;
    }
});

}

reference from : https://stackblitz.com/edit/angular-r6-detect-browser-refresh