[Fixed] Force routerlink to refresh component

Issue

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

Solution

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