title: Angular Router - intercept child route change
body: <p>I'm using NG-ZORRO for the UI components, and I've got this template</p>
  
  <p><code>my-component.component.html</code> (<code>MyComponent</code> class)</p>
  
  <pre><code>&lt;nz-tabset [nzSelectedIndex]="selectedIndex"&gt;
    &lt;nz-tab [nzTitle]="titleTpl"&gt;
      &lt;ng-template #titleTpl&gt;
        &lt;div [routerLink]="['routeOne']"&gt;&lt;i nz-icon type="profile"&gt;&lt;/i&gt;...&lt;/div&gt;
      &lt;/ng-template&gt;
    &lt;/nz-tab&gt;
    &lt;nz-tab [nzTitle]="docsTpl"&gt;
      &lt;ng-template #docsTpl&gt;
        &lt;div [routerLink]="['routeTwo']"&gt;&lt;i nz-icon type="file-text"&gt;&lt;/i&gt;...&lt;/div&gt;
      &lt;/ng-template&gt;
    &lt;/nz-tab&gt;
  &lt;/nz-tabset&gt;
  &lt;router-outlet&gt;&lt;/router-outlet&gt;
  </code></pre>
  
  <p>I need to change <code>selectedIndex</code> based on the active route, be it <code>routeOne</code> or <code>routeTwo</code>.<br>
  A mapping might be</p>
  
  <pre><code>{
     "routeOne": 0,
     "routeTwo": 1
  }
  </code></pre>
  
  <p>Unfortunately I cannot use <code>routerLinkActive</code> as <code>nz-tab</code> doesn't support routing.</p>
  
  <p>Routes are</p>
  
  <pre><code>export const MY_ROUTES: Routes = [
    {
      path: ':myParam',
      component: MyComponent,
      children: [
        {
          path: '',
          redirectTo: 'routeOne',
          pathMatch: 'full'
        },
        {
          path: 'routeOne',
          component: RouteOneComponent
        },
        {
          path: 'routeTwo',
          component: RouteTwoComponent
        }
      ]
    }
  ];
  </code></pre>
  
  <p>All of that because a user might want to access directly <code>http://.../123/routeOne</code>, so I need to pre-select the right tab.</p>
  
  <p>Can I accomplish this in some way? Maybe using <code>ActivatedRoute</code> or <code>Router</code>?</p>