1

My problem is that my route data is still there after refreshing the page, is there a way to remove it so that it doesn't exist after/before I refresh the page?

I have a stackblitz that mirrors my code: whenever I navigate from a specific route Customers to Contacts, it should scroll down the page.
It does this but when I refresh the page, it STILL scrolls down.
I only want the scroll behavior to happen if it navigates from Customers to Contacts, not any other route or refreshing the page. Unfortunately, stackblitz isn't able to show the problem I'm having since I guess refreshing on stackblitz isn't the same as refreshing the browser.

Stack: https://stackblitz.com/edit/angular-hipega-brjh36?file=src%2Fapp%2Fapp.component.ts,src%2Fapp%2Fapp.component.css,src%2Fapp%2Fapp-routing.module.ts,src%2Fapp%2Fcontact%2Fcontact.component.html,src%2Fapp%2Fcontact%2Fcontact.component.css,src%2Fapp%2Fcontact%2Fcontact.component.ts,src%2Fapp%2Fcontact%2Fcontact.module.ts,src%2Findex.html,src%2Fapp%2Fapp.module.ts,src%2Fapp%2Fcustomers%2Fcustomers.module.ts,src%2Fapp%2Fcustomers%2Fcustomers.component.ts,src%2Fapp%2Fgreeting%2Fgreeting.module.ts,src%2Fapp%2Fgreeting%2Fgreeting.component.ts,src%2Fapp%2Fapp.component.html

Snorlax
  • 4,425
  • 8
  • 37
  • 68
  • 1
    Well, I think that what you're experiencing is not the Angular behavior but the browser one. Like, even here, on Stackoverflow, when you scroll down and refresh page, browser tries to persist current scroll position. To mitigate that behavior you will need to eliminate yourself programmatically. Just on component init check your condition and scroll top if it matches. – lemek Feb 04 '23 at 16:48

1 Answers1

0

Not sure of your exact problem, but I imagine if you use the OnInit or OnDestroy lifecycle hooks, you will be able to solve your problem.

I would say use OnDestroy and then remove the parameters from the route before doing so using Router.

constructor(private readonly router: Router) {}

ngOnDestroy(){
    // for demo purposes, you may need to find something more appropriate for your case
    this.router.navigate(["/"])
}

https://angular.io/api/core/OnInit

https://angular.io/api/core/OnDestroy

Ryan Baker
  • 75
  • 5
  • This didn't work for me, but I figured out my issue, thanks for trying. – Snorlax Feb 06 '23 at 20:03
  • 1
    I needed to do two things: 1.) Check if browser refreshes by https://medium.com/front-end-tricks/detect-browser-refresh-with-angular-590cd21d2f02 2.) Pass that checker to my component https://stackoverflow.com/questions/41451375/passing-data-into-router-outlet-child-components – Snorlax Feb 06 '23 at 20:04