How can I access an activated child route's data from the parent route's component?
First child will give you access to data
constructor(route: ActivatedRoute) {
route.url.subscribe(() => {
console.log(route.snapshot.firstChild.data);
});
}
Working with Angular 6, I managed to get the current route data from a parent component, with the following code:
I've configured the Router with the Extra options to inherit the parent routes data:
@NgModule({
imports: [
RouterModule.forRoot(routes, {
initialNavigation: 'enabled',
paramsInheritanceStrategy: 'always'
}),
...
})
export class AppModule {}
Then in my parent component, I was able to see the data changes with:
import { ActivatedRoute, ActivatedRouteSnapshot, NavigationEnd, Router } from '@angular/router';
import { Subscription } from 'rxjs';
import { filter, map } from 'rxjs/operators';
subs: Array<Subscription> = [];
constructor(private router: Router, private route: ActivatedRoute) {
this.subs[0] = this.router.events
.pipe(
filter(event => event instanceof NavigationEnd),
map(() => this.route.snapshot),
map(route => {
while (route.firstChild) {
route = route.firstChild;
}
return route;
})
)
.subscribe((route: ActivatedRouteSnapshot) => {
console.log(route.data);
});
}
ngOnDestroy() {
this.subs.forEach(s => s.unsubscribe());
}
Enjoy!
In Angular 8 work with:
data: any;
constructor(route: ActivatedRoute) {
this.data = route.snapshot.firstChild.data;
}