I have defined some route data in my app routing module like below:
const appRoutes:Routes = [
{path: \'\', component: LoginComponent, data:[{PageName:
For Angular 5+
This service retrieves data on the current route: (in my case "title")
import { Injectable } from "@angular/core";
import { Router, ActivatedRouteSnapshot } from "@angular/router";
@Injectable()
export class AppRoutingService {
constructor(private router: Router) { }
public getRouteTitle(): string {
return this.getRouteData("title");
}
private getRouteData(data: string): any {
const root = this.router.routerState.snapshot.root;
return this.lastChild(root).data[0][data];
}
private lastChild(route: ActivatedRouteSnapshot): ActivatedRouteSnapshot {
if (route.firstChild) {
return this.lastChild(route.firstChild);
} else {
return route;
}
}
}
Component Logic:
import { Component, OnInit, OnDestroy } from "@angular/core";
import { Router, NavigationEnd } from "@angular/router";
// SERVICES
import { AppRoutingService } from "../../shared/services/app-routing.service";
@Component()
export class NavSubmenuComponent implements OnInit, OnDestroy {
title: string = "";
routerEvents: any;
constructor(private router: Router, private appRoutingService: AppRoutingService ) { }
ngOnInit() {
this.title = this.appRoutingService.getRouteTitle();
this.routerEvents = this.router.events
.filter(event => event instanceof NavigationEnd)
.subscribe(() => {
this.title = this.appRoutingService.getRouteTitle();
});
}
ngOnDestroy() {
this.routerEvents.unsubscribe();
}
}
If you are willing to wait until the ngAfterViewInit event you can link to the router outlet using viewchild.
i.e.
@ViewChild('router')
private routerOutlet: RouterOutlet;
ngAfterViewInit() {
this.routerOutlet.activateEvents
.pipe(
map(() => this.routerOutlet
.activatedRouteData
)
)
.subscribe((data) => {
// Code
});
}
<router-outlet #router="outlet"></router-outlet>
export class AppComponent implements OnInit, OnDestroy{
title = 'Welcome';
private paramsSubscription;
constructor(public router: Router,
private activatedRoute: ActivatedRoute,
public authenticationService: AuthenticationService) {}
public ngOnInit() {
this.paramsSubscription = this.activatedRoute.params
.subscribe((params) => {
console.log("Page Name", params['PageName']);
}
}
// Unsubscribe route params to avoid memmory leaks
public ngOnDestroy() {
this.paramsSubscription.unsubscribe();
}
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!
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