I have defined some route data in my app routing module like below:
const appRoutes:Routes = [
{path: '', component: LoginComponent, data:[{PageName:"Login Page"}]}]
I want to get the data globally so that I can use appRoutes in app.component.ts to get the URL redirection related information as below:
export class AppComponent {
title = 'Welcome';
constructor(public router: Router, public authenticationService: AuthenticationService) {
this.router.events.subscribe(event => {
console.log("Url",event.urlAfterRedirects);
console.log("Page Name", router[PageName]); //Not working
}
I tried injecting ActivatedRoute but it's not getting updated after each redirection.
Is there anyway, where I can configure page name and get it in global app.component.ts.
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!