Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Force routerlink to refresh component

Tags:

angular

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

like image 948
Bob5421 Avatar asked Jan 25 '18 15:01

Bob5421


People also ask

How do you reload the current component in angular 6?

Angular will reload page which means Page Component/Resolvers/Guards in specific way. using this. router. onSameUrlNavigation = 'reload';

What is difference between routerLink and routerLink?

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.

Does router navigate reload?

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.

Does routerLink work on Div?

Yes it can be attached to div tag, your route is probably wrong try add / in front of route.


3 Answers

Use

ngOnInit(): void {
   this.router.routeReuseStrategy.shouldReuseRoute = () => false;
}
like image 163
Frederick Montiel Avatar answered Oct 23 '22 16:10

Frederick Montiel


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

like image 24
DeborahK Avatar answered Oct 23 '22 16:10

DeborahK


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

like image 2
Ishaan Srivastav Avatar answered Oct 23 '22 14:10

Ishaan Srivastav