Subscribe to data change in Angular 2 based on route navigation
<p>Suppose I have the following routes:</p>

<pre><code>[
    {
        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 }
]
</code></pre>

<p>I want to use the <code>CustomerViewComponent</code> for /view/ and /view/1/edit</p>

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

<p>This code will not trigger as expected:</p>

<pre><code>this.route.data.subscribe(m =&gt; {
    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 =&gt; {
    console.log(this.route.snapshot.data['edit']);
    console.log(this.route.snapshot.data['other']);
    debugger;
});
</code></pre>

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