title: Angular 6 - navigation to child route refreshes whole page
body: <p>So I'm using Angular 6 and I'm trying to navigate to a child route from the parent route. The navigation is successful, however there is an unwanted page refresh upon rendering the child component. In other words, the navigation works but it also refreshes the page for no apparent reason. Here is my code:</p>
  
  <pre><code>const appRoutes: Routes = [
      {
          path: "parent/:param1/:param2", component: ParentComponent,
          children: [
              { path: ":param3", component: ChildComponent }
          ]
      },
      { path: "", redirectTo: "/index", pathMatch: "full" },
      { path: "**", redirectTo: "/index" }
  ];
  </code></pre>
  
  <p>My parent component looks like this:</p>
  
  <pre><code>import { Component } from "@angular/core";
  import { ActivatedRoute } from "@angular/router";
  
  @Component({
      selector: "my-parent",
      templateUrl: "./parent.component.html"
  })
  
  export class ParentComponent {
      param1: string;
      param2: string;
      loading: boolean;
      tutorials: any[];
  
  constructor(public route: ActivatedRoute) {
      this.loading = true;
      this.param1= this.route.snapshot.params.param1;
      this.param2 = this.route.snapshot.params.param2;
      // get data here
      }
  }
  </code></pre>
  
  <p>And my child component looks like this:</p>
  
  <pre><code>import { Component } from "@angular/core";
  import { ActivatedRoute } from "@angular/router";
  
  @Component({
      selector: "my-child",
      templateUrl: "./child.component.html"
  })
  export class ChildComponent {
      param1: string;
      param2: string;
      param3: string;
      loading: boolean;
      result: any;
  
      constructor(public route: ActivatedRoute) {
          this.loading = true;
          this.param1= this.route.snapshot.params.param1;
          this.param2 = this.route.snapshot.params.param2;
          this.param3 = this.route.snapshot.params.param3;
  
     }
  }
  </code></pre>
  
  <p>Now, the way I try to navigate from the parent component to the child component is the following one:</p>
  
  <pre><code>&lt;a [routerLink]="['/parent', param1, param2, param3]"&gt;             
      &lt;b&gt;Navigate&lt;/b&gt;
  &lt;/a&gt;
  </code></pre>
  
  <p>As I've said, the navigation is successful, but there is an unwanted page refresh which I want to get rid of and I haven't been able to find a working solution. I don't really know what's causing it. I am new to Angular 6.</p>
  
  <p>Thanks in advance for your answers.</p>
  
  <p>EDIT: added parent component html</p>
  
  <pre><code>&lt;router-outlet&gt;&lt;/router-outlet&gt;
  &lt;div class="row" *ngIf="route.children.length === 0"&gt;
      // content here
  &lt;/div&gt;
  </code></pre>