title: Angular 2 route with parameters re-initializing component onInit
body: <p>I have an issue where my component is re-initializing when I route to it with new parameters. Here are my routes. </p>
  
  <pre><code>const appRoutes: Routes = [
    { path: '', component: MyNewComponentComponent },
    { path: 'tiles', component: DisplayTileData },
    { path: 'tiles/:master/:filters', component: DisplayTileData } 
  ];
  </code></pre>
  
  <p>I route to "tiles" and do a service call to fetch some data. I then have a couple of buttons that route back to the same component with values for "master" and "filters". Routing back to the component with parameters re-initializes the component and repeats the service call. I also have a text input on the page. When I first route to this component and add text, the route with parameters is also wiping out that text. </p>
  
  <pre><code>&lt;a *ngFor="let tile of tiles"&gt;{{tile.id}}&lt;/a&gt;&lt;br/&gt;&lt;br/&gt;
  
  &lt;input class="form-control" maxlength="30" minlength="3" name="from" ng-reflect-maxlength="30"&gt;
  &lt;button (click)="addNumberToFilter(15)"&gt;&lt;/button&gt;
  &lt;button (click)="addNewMasterPath('do')"&gt;add new Number to Filter&lt;/button&gt;
  </code></pre>
  
  <p>Is there a way to prevent this route re-initialization when routing with new parameters. </p>
  
  <p>I have defaults values for the buttons. Here are the methods.</p>
  
  <pre><code>public variable: any = [3,4];
  public master: any = 'eat';
  
  addNewMasterPath(newMasterVariable) {
      this.master = this.master + '-' + newMasterVariable;
      var newMap = this.variable.map(items =&gt; { return items}).join('-');
      this.router.navigate(['tiles/', this.master, newMap]);
  }
  
  addNumberToFilter(newParameter) {
      this.variable.push(newParameter);
      var newMap = this.variable.map(items =&gt; { return items}).join('-');
      this.router.navigate(['tiles/', this.master, newMap]);
  }
  </code></pre>