Angular2 routing: can't access the data defined in route

Question

I'm trying to create a breadcrumb component using this tutorial by Brian Love

It requires you to set a breadcrumb key-value pair in your routes data:

const routes: Routes = [{
    path: "",
    component: RootComponent,
    children: [{
            path: "signin",
            component: SigninComponent,
            data: {
                breadcrumb: "Sign In"
            }
        },
        {
            path: "signup",
            component: SignupComponent,
            data: {
                breadcrumb: "Sign Up"
            }
        },
        {
            path: "",
            component: IndexComponent
        }
    ]
}, ];

For my app module, it works as expected.

However, I have a main module which is lazy-loaded after the user logs in from app. This is where I want my breadcrumbs.

For some reason, I'm unable to access the data from my lazy-loaded module, thus satisfying this condition in breadcrumb.component.ts and breaking the behavior.

 if (!child.snapshot.data.hasOwnProperty(ROUTE_DATA_BREADCRUMB)) {
    continue;
}

Any ideas why I can't get the data here?

My app-routing module:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { TmLoginComponent } from './login/tm-login.component';
import { MainComponent } from './main/main.component';
import { AuthenticationGuard } from './login/authentication-guard';
import { PageNotFoundComponent } from './404/page-not-found.component';


const routes: Routes = [{
    path: '',
    loadChildren: 'app/main/main.module#MainModule',
    canActivate: [AuthenticationGuard],
}, {
    path: 'login',
    component: TmLoginComponent,
}, {
    path: 'home',
    redirectTo: '/',
    pathMatch: 'full',
}, {
    path: '**',
    component: PageNotFoundComponent
}];


@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
})

export class AppRoutingModule {}

My main routing module (lazy):

import { NgModule }             from '@angular/core';
import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { MainComponent } from './main.component';
import { IndiaComponent } from './india/india.component';
import { MaharashtraComponent } from './india/maharashtra/maharashtra.component';
import { KarnatakaComponent } from './india/karnataka/karnataka.component';
import { PuneComponent } from './india/maharashtra/pune/pune.component';
import { MumbaiComponent } from './india/maharashtra/mumbai/mumbai.component';

const routes: Routes = [{
    path: '',
    component: MainComponent,
    data: {
        breadcrumb: 'Main'
    },
    children: [{
            path: 'india',
            component: IndiaComponent,
            data: {
                breadcrumb: 'India'
            },
            children: [{
                    path: 'maharashtra',
                    component: MaharashtraComponent,
                    data: {
                        breadcrumb: 'Maharashtra'
                    },
                    children: [{
                            path: 'pune',
                            component: PuneComponent,
                            data: {
                                breadcrumb: 'Pune'
                            },
                        },
                        {
                            path: 'mumbai',
                            component: MumbaiComponent,
                            data: {
                                breadcrumb: 'Mumbai'
                            }
                        },
                    ]
                },
                {
                    path: 'karnataka',
                    component: KarnatakaComponent,
                    data: {
                        breadcrumb: 'Karnataka'
                    }
                },
            ],
        },

    ]
}, ];

export const mainRouting: ModuleWithProviders = RouterModule.forChild(routes);

seidme · Answer 1 · 2017-01-17T12:20:01.623

0

Inject ActivatedRoute to your component and subscribe to data property since it's a BehaviorSubject:

export class MainComponent {

    constructor(private _activatedRoute: ActivatedRoute) {
        this._activatedRoute.data.subscribe(data => {
            console.log('data: ', data); // => { breadcrumb: 'Main' }
        });
    }
}

edited Jan 17 '17 at 12:20

answered Jan 17 '17 at 11:30

seidme

12,543
5
36
40

Hi. Thanks for answering. Using your advice, I can access the data for my `main` route, but the data for the child routes is still undefined. – Snowman Jan 17 '17 at 12:07
Hi. Following the same logic, in order to access the data defined in your child route, you need to inject the ActivatedRoute in the child component. – seidme Jan 17 '17 at 12:11
Okay, I injected the `ActivatedRoute` in all the child comps, your fuction logs the data correctly from the respective constructors; but I'm still unable to access it using my breadcrumb component. – Snowman Jan 17 '17 at 12:17
It's not currently directly supported to access the activated route data of the other component except for its own. There are some 'hacky' solutions around, this link could be helpful for your use case: http://stackoverflow.com/questions/38312417/angular2-router-get-route-data-from-url-to-display-breadcrumbs – seidme Jan 17 '17 at 12:39
The hacky solution is what I'm using :) Doesn't seem to word for lazy modules – Snowman Jan 17 '17 at 12:42

Angular2 routing: can't access the data defined in route

1 Answers1