Router.navigate changes the url but does not pass the component

Question

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

So, here is how I created my function in a .ts file:

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

And as I called it in my template:

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

It changes the url but does not pass the component. I imported this into my component:

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

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

Can you help me make this a component? How else can I redirect a user to a page using a function?

Answer 1

( ) URL-. navigateByUrl?

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