title: routerLinkActive in Angular 4 doesn't add class when only parameter changes
body: <p>I have a problem with routerLinkActive in angular 4. I have this setup. </p>
  
  <pre><code>export const FruitRoutes = [
      {
          path: 'fruits/:id', component: FruiteNav,
          children: [
              {path: '', component: FruitGeneral},
              {path: 'settings', component: FruitSettings}
          ]
      }
  ];
  </code></pre>
  
  <p>It's a tab page for a single fruit. Ex: fruits/4 (general tab) and fruits/4/settings (settings tab)</p>
  
  <p>The tab navigator (FruitNav) is set up like following and it works in most of the cases:</p>
  
  <pre><code> &lt;ul class="nav nav-tabs"&gt;
          &lt;li class="nav-item"&gt;
              &lt;a [routerLink]="['/fruits', fruitId]" class="nav-link" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}"&gt;General&lt;/a&gt;
              &lt;/li&gt;
              &lt;li class="nav-item"&gt;
                  &lt;a [routerLink]="['/fruits', fruitId,'settings']" class="nav-link" routerLinkActive="active"&gt;Settings&lt;/a&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
  
      &lt;router-outlet&gt;&lt;/router-outlet&gt;
  </code></pre>
  
  <p>Now the si problem: The route is currently at fruits/4. If I am within any of the child tabs or even in main nav class, and call for another fruitId, the routerLinkActive won't work. Ex:</p>
  
  <pre><code>&lt;a style="color:#fff" [routerLink]="['/fruits', 5,'settings']" class="nav-link"&gt;Test&lt;/a&gt;
  </code></pre>
  
  <p>will navigate to fruit/5 but none of the tabs will be active/selected</p>
  
  <p>A typical usecase could be a list of similar fruits that the user could navigate to. </p>
  
  <p>Does anyone have a solution for this?</p>