Angular 5 passing data to child route

Issue

In my project on Angular 5, routing config looks like this:

const routes: Routes = [
    {
        path:      'a',
        component: MainComponent,
        children:  [
            {
                path:      'ab',
                component: ABComponent
            },
            {
                path:      'ac',
                component: ACComponent
            }
        ],
        data:      AData // array of objects
    },
    {
        path:      'b',
        component: MainComponent,
        children:  [
            {
                path:      'bb',
                component: BBComponent,
                data:      BBData // array of objects
            },
            {
                path:      'bc',
                component: BBComponent,
                data:      BCData // array of objects
            }
        ],
        data: extraData // if I put it on, extraData will be both in BBComponent and BCComponent
    }
];

In theory, BBData should passed on BBComponent, and BCData on BCComponent, but object this.route.snapshot.data (this.route instance of ActivatedRoute) is empty. For path ‘a’, data passed in both component successfully.

I have not idea how to fix it, please, help me.

Solution

Check your activated route firstChild property.

Answered By – Adawg

Answer Checked By – Katrina (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.