router.navigate changes the URL, but is not rendering the component

Question

Instead of using <a href="/my-path/{{my_param}}"></a> in my template, I am willing to use a function with paramters to redirect me to a page.

So, this is how I built my function in my .ts file:

redirectToChat(my_param){
    this.router.navigate(['./my-path/' + my_param ]);
}

And how I called it in my template:

 <div (click)="redirectToChat(my_param)">
    ...
</div>

It changes the URL, but not rendering the component. I imported this in my component:

import { Router, ActivatedRoute, ParamMap } from '@angular/router';

And I used it in my constructor: private router: Router

Can you help me to render corrctly the component? How else can I redirect the user to the page using a function?

Answer 1

You are mixing navigate (to component) with navigate by url. Have you tried navigateByUrl?

this.router.navigateByUrl('./my-path/' + my_param);