Retrieving routing information from directives within angular2

Question

Retrieving routing information from directives within angular2

const APP_ROUTES: RouterConfig = [

    {

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

    }


]

Assuming the route configuration is set as displayed above, how can one access the data property from a certain 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>

Within the hello directive, what is the method to obtain the route configuration related to the value of the routerLink attribute?

angular typescript angular2-routing

Answer 1

Answer №1

(RC6): In order to access data from the ActivatedRoute in Angular, you must first import it:

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

Next, you need to inject ActivatedRoute into your constructor:

constructor(private route: ActivatedRoute) { }

Your class should also implement OnInit like so:

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

If your URL is dynamic, it is advised to use an observer instead of snapshot. For accessing data from parent components, you can use:

this.route.snapshot.parent.data['name']

Answer 2

(RC6): In order to access data from the ActivatedRoute in Angular, you must first import it:

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

Next, you need to inject ActivatedRoute into your constructor:

constructor(private route: ActivatedRoute) { }

Your class should also implement OnInit like so:

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

If your URL is dynamic, it is advised to use an observer instead of snapshot. For accessing data from parent components, you can use:

this.route.snapshot.parent.data['name']

Answer 3

Answer №2

To receive route parameters, simply include them within your Component class and declare private route: ActivatedRoute in the constructor.

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

Alternatively, you can use this.route.snapshot.data to retrieve passed data within the route definition.

Answer 4

To receive route parameters, simply include them within your Component class and declare private route: ActivatedRoute in the constructor.

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

Alternatively, you can use this.route.snapshot.data to retrieve passed data within the route definition.

Retrieving routing information from directives within angular2

Answer №1

Answer №2

Similar questions

Alter the Color of the 'div' According to the Background

Encountering an issue with Modal functionality on Ionic 4 when spanning across multiple pages

What causes hot keys to not register any events?

TypeScript encounters difficulty locating the div element

Changing the ngModel value causes the maxlength to become ineffective

Talebook by Syncfusion

Issue with Bootstrap Angular dropdown menu malfunctioning within ChildRoute

Angular 4 in combination with ngx-datatable is showing a 404 error for the @swimlane/ngx-datatable package

Creating Algorithms for Generic Interfaces in TypeScript to Make them Compatible with Derived Generic Classes

Transferring the date from an HTML input to a TypeScript file in Angular when the button

Interacting with Angular 2 Components Inside <router-outlet>

Presenting CSV data in a tabular format using Angular and TypeScript

What is the best way to store the outcome of a promise in a variable within a TypeScript constructor?

The ngx-datatable is returning an error message stating that it cannot read the property 'indexes' of an undefined

Clarifying the concept of invoking generic methods in TypeScript

Uploading Files to REST API using Angular2

Tips for transferring several parameters from an Angular 8 application to a .NET Core API

Issue with Angular Provider Missing in Ahead-Of-Time Compilation

Tips for updating the display after making an angular $http request using rxjs Observables

"Enhance your software with a customizable interface or develop new functionalities to generate analogous