How to get Route data into App Component in Angular 2

Question

I have defined some route data in my app routing module like below:

    const appRoutes:Routes = [
  {path: \'\', component: LoginComponent, data:[{PageName:         


        

Answer 1

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!