title: router.navigate changes the URL, but is not rendering the component
body: <p>Instead of using <code>&lt;a href="/my-path/{{my_param}}"&gt;&lt;/a&gt;</code> in my template, I am willing to use a function with paramters to redirect me to a page. </p>
  
  <p>So, this is how I built my function in my .ts file:</p>
  
  <pre><code>redirectToChat(my_param){
      this.router.navigate(['./my-path/' + my_param ]);
  }
  </code></pre>
  
  <p>And how I called it in my template:</p>
  
  <pre><code> &lt;div (click)="redirectToChat(my_param)"&gt;
      ...
  &lt;/div&gt;
  </code></pre>
  
  <p>It changes the URL, but not rendering the component.
  I imported this in my component:</p>
  
  <pre><code>import { Router, ActivatedRoute, ParamMap } from '@angular/router';
  </code></pre>
  
  <p>And I used it in my constructor: <code>private router: Router</code></p>
  
  <p>Can you help me to render corrctly the component? How else can I redirect the user to the page using a function?</p>