How would I go about detecting the active route when navigating from within a child router

Help Requests
1

I’m using Aurelia 1 and I have the following component code which essentially is a child router.

export class ControlRoomMeeting {
  public router: Router;

  configureRouter(config: RouterConfiguration, router: Router) {
    this.router = router;
    config.map([
      { route: ['', 'manual-mode'], name: 'manual-mode', moduleId: PLATFORM.moduleName('resources/view-models/control-room/manual-mode'), title: 'Manual', nav: true, settings: { imageurl: 'control-room/104x104.gif', routeId: "manual-mode" } },
      { route: 'bumper', name: 'bumper', moduleId: PLATFORM.moduleName('resources/view-models/control-room/bumper'), title: 'Bumper', nav: true, settings: { imageurl: 'control-room/104x104.gif' } },
      { route: 'messages', name: 'messages', moduleId: PLATFORM.moduleName('resources/view-models/control-room/messages'), title: 'Messages', nav: true, settings: { imageurl: 'control-room/104x104.gif' } },
      { route: 'qna', name: 'qna', moduleId: PLATFORM.moduleName('resources/view-models/control-room/qna'), title: 'Q&A', nav: true, settings: { imageurl: 'control-room/104x104.gif' } },
      { route: 'settings', name: 'settings', moduleId: PLATFORM.moduleName('resources/view-models/control-room/settings'), title: 'Settings', nav: true, settings: { imageurl: 'control-room/104x104.gif' } },
      { route: 'studio', name: 'studio', moduleId: PLATFORM.moduleName('resources/view-models/control-room/studio'), title: 'Studio', nav: true, settings: { imageurl: 'control-room/104x104.gif' } },
    ]);
  }
}

I have a navigation bar component which is essentially supposed to show the state of the current child route.

I tried to use the EventAggregator to watch the RouterEvent.Success event, but it doesn’t seem to fire.

Upon investigation it seemed to be that the router was only catching Success events for the top level router (the parent) and not the child router. I investigated this by essentially running the following event

  attached() {
    this.routerSuccessEvent = this.eventAggregator?.subscribe(RouterEvent.ChildComplete, (event: {
      instruction: NavigationInstruction,
      result: PipelineResult,
    }) => {
      this.router.refreshNavigation();

      logger.info("Instructions", event.instruction.getAllInstructions().flatMap(instruction => instruction.getAllInstructions()))
      logger.info("Route changed", event.instruction.config.name)
      logger.info("Result", event.result.instruction.getAllInstructions())
    })

    this.activeRouteName = this.router.currentInstruction.config.name as Route;
  }

When you take a look at the config property for the currentInstruction object, you just see a repeat of the parent router which looks like this and is essentially a continuous loop of the same navModel object.

image
image1134×1402 191 KB

I’m not really sure how to proceed from here. The easiest solution would be to read the URL and assume it contains the information I need. But I feel this is something that should be baked into the router