How can I detect a route change on a child component?. This is what I have tried, but I only see the app component trace the route change. I want to be able to detect when the url change from e.g. #/meta/a/b/c to #/meta/a/b/c/d in the MetaDetailView component.
@RouteConfig([
{ path: '/', name: 'Home', redirectTo: ['Meta']},
{ path: '/meta/...', name: 'Meta', component: MetaMainComponent, useAsDefault: true},
...other routes...,
])
export class AppComponent {
constructor(private _router: Router) {
_router.subscribe( (url) => console.log("app.url = " + url));
}
}
@RouteConfig([
{ path: '/*other', name: 'Detail', component: MetaDetailViewComponent, useAsDefault: true},
])
export class MetaMainComponent {
constructor(private _router: Router) {
_router.subscribe( (url) => console.log("metamain.url = " + url));
console.log("MetaMainComponent")
}
}
export class MetaDetailViewComponent {
constructor(private _router: Router) {
_router.subscribe( (url) => console.log("metadetail.url = " + url));
console.log("MetaDetailViewComponent")
}
}
Thanks Jesper
Create a global service that subscribes to router
and inject the service wherever you want to know about route changes. The service can expose changes by an Observable
itself so interested components also can subscribe to get notified automatically.