Access route data from directives in angular2

Question

const APP_ROUTES: RouterConfig = [

    {

        path: 'app/home',
        component: HomeComponent,
        data: {
          name: 'Home'
        }

    }


]

If I have route configuration shown as above how do I access its data property from some directive.

@Directive({
  name: 'hello'
})

class HelloDirective {
 @Input('routerLink') link: string[];

 ngOnInit() {
    //HOW CAN I GET ROUTE AND ITS DATA FROM PATH/URL ???

    //const magicallyGrabbedRoute = pleaseGiveMeMyRouteFrom(this.link);
    //const myData = magicallyGrabbedRoute.data;

 }

}

<a hello [routerLink]="['app/home']"> Go Home </a>

In hello directive how can I get route configuration for the routerLink attribute's value ?

Answer 1

(RC6):You need to import:

import { ActivatedRoute } from '@angular/router';

Then in your constructor:

constructor(private route: ActivatedRoute) { }

The class should implements OnInit this way:

ngOnInit() { const myData = this.route.snapshot.data['name']; }

This is in case your URL is not dynamic. If dynamic you should use an observer and not snapshot. p.s. for parents of parents just use: this.route.snapshot.parent.data['name']

Answer 2

You can subscribe on route parameters by putting it inside your Component class. & have private route: ActivatedRoute in constructor

this.sub = this.route
  .params //.data //--> use data to retrieve route data
  .subscribe(params => {
    console.log(params['id']);
  });

You could also use this.route.snapshot.data to retrieve passed data in route defination.