Angular 2: Route parameter changes, reload the same page?
You can use subscriber route.params
to listen the param's change.
import { ActivatedRoute } from '@angular/router';
export class DemoPage {
constructor(private _route: ActivatedRoute) { }
ngOnInit() {
this._route.params.forEach(params => {
let userId = params["userId"];
//call your function, like getUserInfo()
})
}
}
How to reload a page in Angular 8 the proper way
You can find total working example here in this StackBlitz Link
Update
First of all doing window.location.reload()
is totally against of Single-Page-Application nature. rather, You can reload particular component when actually clicking on that link.. so, to do this task we have angular router. For particular component reload you can push this line of code in main app.component.ts once for full application.
mySubscription;
constructor(private router: Router, private activatedRoute: ActivatedRoute){
this.router.routeReuseStrategy.shouldReuseRoute = () => false;
this.mySubscription = this.router.events.subscribe((event) => {
if (event instanceof NavigationEnd) {
// Trick the Router into believing it's last link wasn't previously loaded
this.router.navigated = false;
}
});
}
above code we are going to subscribing
to router-events
. and then we are checking each and every router-NavigationEnd
event, then just telling router, forget to add current navigation of router to its own history. So, each time whenever we are trying to reload same component each and every events are firing for that particular component only, thats a SPA.
IN app.component.ts of ngOnDestroy()
we have to unsubscribe from router events, when component is destroyed.
ngOnDestroy(){
if (this.mySubscription) {
this.mySubscription.unsubscribe();
}
}
Now, for example you have Home and Details component or anything else of component... You can reload each component by calling this.router.navigate([this.router.url])
this will reload all current component. for example, In home component
we have reload-button
and click event of that we are just calling this.router.navigate([this.router.url])
. same for details component too.. or any other component..
Home.component.ts
reLoad(){
this.router.navigate([this.router.url])
}
Details.component.ts
reLoad(){
this.router.navigate([this.router.url])
}
You can check in updated above StackBlitz link, all working example of reloading with full router-state reloading. In browser console see each and every events of component is firing by clicking button reload()
.
How to reload the current route with the angular 2 router
If your navigate() doesn't change the URL that already shown on the address bar of your browser, the router has nothing to do. It's not the router's job to refresh the data. If you want to refresh the data, create a service injected into the component and invoke the load function on the service. If the new data will be retrieved, it'll update the view via bindings.
Angular2 router 2.0.0 not reloading components when same url loaded with different parameters?
update 2
This answer is only for a long ago discontinued router version.
See https://angular.io/api/router/RouteReuseStrategy for how to do it in the current router.
update 1
That's now fixed (Angular 2.3) for the new router by https://github.com/angular/angular/pull/13124 which allows to provide a custom reuse strategy.
For an example see also https://www.softwarearchitekt.at/post/2016/12/02/sticky-routes-in-angular-2-3-with-routereusestrategy.aspx
original
https://github.com/angular/angular/issues/9811
That's a known issue.
Currently there is no way to make the router re-create the component on parameter-only route changes.
They discussed plans to implement some reuse-strategies eventually.
You can subscribe to params changes and execute your code there instead of in ngOnInit()
How to Refresh a Component in Angular
After some research and modifying my code as below, the script worked for me. I just added the condition:
this.router.navigateByUrl('/RefreshComponent', { skipLocationChange: true }).then(() => {
this.router.navigate(['Your actualComponent']);
});
Angular 2 reload route on param change
As per the first final release, this is resolved.
Just pay much attention to correctly reset the state of the component when the parameter changes
this.route.params.subscribe(params => {
this.param = params['yourParam'];
this.initialiseState(); // reset and set based on new parameter this time
});
Angular - Navigate to current same URL with component reload not the whole page
I have found this workaround method since the onSameUrlNavigation
property in Angular 5.1 is not what I need.
I just need to override shouldReuseRoute
, so added an exception for the component route that I want to refresh, if the current and future route are equal view
.
And also I can navigate to other routes without problems, even for navigate from Angular Material
sidenav
.
this.router.routeReuseStrategy.shouldReuseRoute = function (future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot) {
if (future.url.toString() === 'view' && curr.url.toString() === future.url.toString()) {
return false;
}
return (future.routeConfig === curr.routeConfig);
};
Update:
For those they want to use the new onSameUrlNavigation
property in Angular 5.1 you can refer to this blog:
https://medium.com/engineering-on-the-incline/reloading-current-route-on-click-angular-5-1a1bfc740ab2
Related Topics
How to Make an Image Center (Vertically & Horizontally) Inside a Bigger Div
How to Select the Last Element With a Specific Class, Not Last Child Inside of Parent
Flex Property Not Working in Ie
Compiling Dynamic HTML Strings from Database
How to Download a Locally Stored File in Vuejs
Reverse Order of Columns in CSS Grid Layout
Disable Blue Highlight When Touch/Press Object With Cursor:Pointer
How to Playback Mkv Video in Web Browser
On Hover of Child, Change Background Color of Parent Container (Css Only)
How to Prevent a User from Entering Negative Values in HTML Input
Want to Make Font Awesome Icons Clickable
Alternative to Iframes With Html5
How to Divide Div Color With 30% Different Color and 70% Different Color in Vertical Using CSS
Moving an Image Across a HTML Canvas
How to Disable a Text Area or Mat-Form-Field