Did you know Jupiter's moons were used for Navigation and Map making starting in the 1600's up to the 1800's? A fascinating story of using Jupiter's moons for Navigation and Map Making
Angular's Default Navigation Behavior
Angular will not reload an already loaded component when navigating to it by default.
// Browser is already on /pathName/5102
// We see the proper display which means
// our router paths are correct.
// And now we attempt to go to a new path.
let newLocation = `/pathName/5110`;
// override default re use strategy
this.router
.routeReuseStrategy
.shouldReuseRoute = function () {
return false;
};
this.router
.navigateByUrl(newLocation)
.then(
(worked) => {
// Works only because we hooked
// routeReuseStrategy.shouldReuseRoute
// and explicitly told it don't reuse
// route which forces a reload.
// Otherwise; the url will change but new
// data will not display!
},
(error) => {
debugger;
}
);
Angular's Route ReUse Strategy
There have been many questions such as "My page url changes, but the navigation doesn't do anything" This is the effect of Angular's default behavior.
How to Override Angular's Default Behavior
this.router
.routeReuseStrategy
.shouldReuseRoute = function () {
return false;
};
Just before any navigation is done, this code will allow the page to reload, refresh etc.
But there are alternatives. For the page that doesn't reload, we can create a data injection entry point and call the ChangeDectectorRef detectChanges() function.
JWP2020 Angular Navigation doesn't work
Top comments (0)