Angular Router - intercept child route change

Question

I'm using NG-ZORRO for the UI components, and I've got this template

my-component.component.html (MyComponent class)

<nz-tabset [nzSelectedIndex]="selectedIndex">
  <nz-tab [nzTitle]="titleTpl">
    <ng-template #titleTpl>
      <div [routerLink]="['routeOne']"><i nz-icon type="profile"></i>...</div>
    </ng-template>
  </nz-tab>
  <nz-tab [nzTitle]="docsTpl">
    <ng-template #docsTpl>
      <div [routerLink]="['routeTwo']"><i nz-icon type="file-text"></i>...</div>
    </ng-template>
  </nz-tab>
</nz-tabset>
<router-outlet></router-outlet>

I need to change selectedIndex based on the active route, be it routeOne or routeTwo.
A mapping might be

{
   "routeOne": 0,
   "routeTwo": 1
}

Unfortunately I cannot use routerLinkActive as nz-tab doesn't support routing.

Routes are

export const MY_ROUTES: Routes = [
  {
    path: ':myParam',
    component: MyComponent,
    children: [
      {
        path: '',
        redirectTo: 'routeOne',
        pathMatch: 'full'
      },
      {
        path: 'routeOne',
        component: RouteOneComponent
      },
      {
        path: 'routeTwo',
        component: RouteTwoComponent
      }
    ]
  }
];

All of that because a user might want to access directly http://.../123/routeOne, so I need to pre-select the right tab.

Can I accomplish this in some way? Maybe using ActivatedRoute or Router?

Answer 1

You can make use of the router to listen for the events as you did:

this.selectedRoute$ = this.router.events.pipe(
     startWith(this.router),
     filter(
         (event) => event instanceof NavigationEnd || event instanceof Router
     ),
     map((event: NavigationEnd | Router) => event.url),
     map(path => this.map[path])
);

You can adapt the later map to check if the route matches your route and then subscribe using the async pipe in the template like:

<nz-tabset [nzSelectedIndex]="selectedRoute$ | async">
....
</nz-tabset>

This will also work when you refresh the page or navigate manually to that route.

Edit: or subscribe to ActivatedRoute to retrieve the URL in the same manner. Make more use of the Observables, cool stuff! Good luck!

Edit 2: If you want the route only for the current <router-outlet> scope you can make use of the ActivatedRoute like this:

this.router.events
            .pipe(
                filter((event) => event instanceof NavigationEnd),
                map(() => this.activated),
                map((route) => {
                    while (route.firstChild) {
                        route = route.firstChild;
                    }
                    return route;
                }),
                switchMap((route) => route.url)
            )
            .subscribe((url) => console.log(url));

This should give you what you need.