Subscribe to data change in Angular 2 based on route navigation

Question

Suppose I have the following routes:

[
    {
        path: 'view',
        children: [
            {

                path: ':id',
                component: CustomerViewComponent,
                resolve: {
                    customerViewData: CustomerResolve,
                    edit: ViewRouteResolve // Returns false
                },
                data: {
                    other: false
                },
                children: [
                    {
                        path: 'edit',
                        resolve: {
                            edit: EditRouteResolve // Returns true
                        },
                        data: {
                            other: true
                        }
                    },
                    {
                        path: '',
                        data: {
                            other: false
                        }
                    }
                ]
            }
        ]
    },
    { path: '', component: CustomerListComponent }
]

I want to use the CustomerViewComponent for /view/ and /view/1/edit

The problem is I am unable to catch this data change in my component. I have tried with the resolve or data and I can't catch any changes...

This code will not trigger as expected:

this.route.data.subscribe(m => {
    debugger; // Triggers only once the view loads, then never again
});

// This triggers quite often, but the data is always stale.
this.router.events.subscribe(m => {
    console.log(this.route.snapshot.data['edit']);
    console.log(this.route.snapshot.data['other']);
    debugger;
});

Could this be a bug? my only work around is to look at the event NavigationEnd and analyze the .url string property...

Answer 1

When listening to router.events the subscribe callback will get a few different types of events, multiple per route change. The ActivationStart is the one that holds the route data. Something like the following helped me:

this.router.events.subscribe(event => {
  if (event instanceof ActivationStart) {
    let data = event.snapshot.data;
    this.titleService.setTitle(data['title'] || '_your_default_title_');
  }
})

Answer 2

Try instead to use ActivatedRoute from @angular/router

this.activatedRoute.params.subscribe(params => {
    console.log(params['edit']);
    console.log(params['other']);
});