Get component associated with current route (Aurelia 2)

Hello!
I am working on a project that has a main array of static configured routes, as well as several sub-level configured route arrays, which I want to attach data to (in the data {} - object), and which I then want to read out and work with that data on the component level.

Now, I tried solving my problem via the IRouter: this.router.activeComponents[0].component.name does indeed work on the first level of this problem. But now, I want to describe my problem:

This is the root - route configuration:

export const configuredRoutes: IRoute[] = [
    {
        path: '/services',
        component: async () => import('./views/services/service-view.js'),
        title: 'Services',
...
]

Then, this is what is going on in the service-view.js:

import { IRoute, IRouteableComponent, IRouter } from "@aurelia/router";
import { resolve } from "aurelia";
import { servicesRoutes } from "./services-routes.js";

export class ServiceView implements IRouteableComponent {
    public static routes: IRoute[] = servicesRoutes;
    private router: IRouter = resolve(IRouter);

}

Which lets Aurelia handle the services routes as under the path of the component (/services/).

The servicesRoutes looks like this:

import { IRoute } from '@aurelia/router';

export const servicesRoutes: IRoute[] = [
    {
        path: '/newsletter',
        component: async () => import('./newsletter/newsletter-view.js'),
        title: 'newsletter',
        data: {
            targetData: "important data!"
        },
    },
...
];

The expected behaviour:

As in /services/, where I get this.router.activeComponents[0].component.name equals service-view.js, I get this.router.activeComponents[0].component.name equals newsletter-view.js when my current navigation path is /services/newsletter/.

The observed behaviour:
No matter which sub-path of /services/ I am currently navigating, this.router.activeComponents[0].component.name is always the service-view.js defined in the main static routes configuration. I also iterated the activeComponents for each element; it is always only one inside. So, could it be that this is an Aurelia bug? If not, I would like to get help in my endeavour.

Best regards and thanks for reading my question,
Cr0n

Hi,

The (currently slightly mis-named) activeComponents contains the RoutingInstructions for the root/top routing scope. In your cases this is always service. In order to find the instruction in the next routing scope from service you need to check the instructions in the nextScopeInstructions property of the instruction.

1 Like