How to get current route custom data in angular 2?

Question

I have set up routes is like below

const appRoutes: Routes = [
  {
    path: \'login\',
    component: LoginComponent,
    data: {
      title: \'Login TTX\         


        

Answer 1

After I tested various solution, the angular support group answer actually solved this problem nicely.

ActivatedRoute doesn't carry data, and here's the solution for detecting the page variable within the data: { page: 'login' }.

import { Router, RoutesRecognized } from '@angular/router';

export class AppComponent {
  page = '';
  constructor(private router: Router) {
    // listen to page variable from router events
    router.events.subscribe(event => {
      if (event instanceof RoutesRecognized) {
        let route = event.state.root.firstChild;
        this.page = 'page-' + route.data.page || '';
        console.log('Page', this.page);
      }
    });
  }
}