I have created a very basic angular 5 application.
I have a left menu which is always displayed (it is part of asp.net core2.0 mvc project skelton with bootstrap).
I have created 2 links in this menu:
<li>
<a [routerLink]='["/component/1"]'>Component 1</a>
</li>
<li>
<a [routerLink]='["/component/2"]'>Component 1</a>
</li>
As you can see, the 2 links points to the same route (same component). We just have the id which changes. Here is the route line in app.module.ts
{ path: 'component/:id', component: MyComponent, pathMatch: 'full' },
I have added some log in my component typescript class:
constructor()
{
console.log("constructor");
}
ngOnInit()
{
console.log("ngOnInit");
}
If i click on the first link, everything works great. But if i click to second link, my component is not reloaded. There are no calls to constructor or ngOnInit. If i click on another link which loads another component and then return to the second link, it works.
What i want to do is how can i force angular to reload component when i click on a link which points to the same component than the one actually displayed.
Thanks
Angular will reload page which means Page Component/Resolvers/Guards in specific way. using this. router. onSameUrlNavigation = 'reload';
What is the difference between [routerLink] and routerLink ? How should you use each one? They're the same directive. You use the first one to pass a dynamic value, and the second one to pass a static path as a string.
By default, the router will ignore this navigation. However, this prevents features such as a “refresh” button. Use this option to configure the behavior when navigating to the current URL.
Yes it can be attached to div tag, your route is probably wrong try add / in front of route.
Use
ngOnInit(): void {
this.router.routeReuseStrategy.shouldReuseRoute = () => false;
}
Normally in this case, you don't reload the component. Rather, you watch for changes in the required route parameter and proceed accordingly.
In my application, I use something like this:
constructor(private route: ActivatedRoute) { }
ngOnInit(): void {
this.route.params.subscribe(
params => {
const id = +params['id'];
this.getMovie(id);
}
);
}
This code catches ever change to the route parameter and causes my getMovie
method to be executed every time the route parameter changes.
For a complete example, check out: https://github.com/DeborahK/MovieHunter
The answer by Deborah works best for your case where we only have to look for changes in the queryParams.
For anyone else, if your project really requires re-rendering a component as mine did(maybe you require to call ngOninit to reevaluate something), it can be done with
constructor(private router: Router){
// override the route reuse strategy
this.router.routeReuseStrategy.shouldReuseRoute = function(){
return false;
}
this.router.events.subscribe((evt) => {
if (evt instanceof NavigationEnd) {
// trick the Router into believing it's last link wasn't previously loaded
this.router.navigated = false;
// if you need to scroll back to top, here is the right place
window.scrollTo(0, 0);
}
});
}
The thread to the discussion where I found the solution : https://github.com/angular/angular/issues/13831
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With