How to get Route data into App Component in Angular 2
Try to filter
and loop your events instead of subscribe
constructor(router:Router, route:ActivatedRoute) {
router.events
.filter(e => e instanceof NavigationEnd)
.forEach(e => {
this.title = route.root.firstChild.snapshot.data['PageName'];
});
}
Please check the following working demo: https://plnkr.co/edit/rBToHRaukDlrSKcLGavh?p=info
If you had statically routed using Router object like below:
{
path: '',
pathMatch: 'full',
component: NameComponent,
data: { variableName: 'variableValue' }
},
On ngOnInit() you can use ActivatedRoute object to recover the data you passed from Router definition:
ngOnInit() {
this.localVariable = this.route.snapshot.data['variableName'];
}
Obs: I am using Angular 5!
This code was written by Todd Motto (Google Developer Expert) to access route data in a parent component or app component. Works like a gem.
import { ActivatedRoute, NavigationEnd, Router } from '@angular/router'
import { filter, map, mergeMap } from 'rxjs/operators'
constructor(private route: ActivatedRoute, private router: Router) {}
ngOnInit() {
this.router.events.pipe(
filter(event => event instanceof NavigationEnd),
map(() => this.route),
map(route => {
while (route.firstChild) route = route.firstChild
return route
}),
filter(route => route.outlet === 'primary'),
mergeMap(route => route.data)
).subscribe(data =>
console.log('data', data)
)
}
See: https://ultimatecourses.com/blog/dynamic-page-titles-angular-2-router-events
In his example he is using route data to set the page title in app component.
Why accessing route data in a parent is so complicated I'll never know!