ROUTE.md

There are three decorators dealing with the router: @RouteData, @RouteParams and @RouteQueryParams. They extract the resolved data, route parameters and query parameters values respectively using the ActivatedRoute.

All decorators require that the ActivatedRoute is injected in the component's constructor as route and that the component has the ngOnInit function defined. If you'r using AOT, make sure that you also implement the OnInit interface!

DEMO

Before angular v5.2 angular didn't allow you to inherit data between routes, which was sometimes very annoying, because a component needed to know which route resolved what

@Component({
    selector: 'app-contacts',
    templateUrl: './contacts.component.html',
    styleUrls: ['./contacts.component.scss']
})
export class ContactsComponent implements OnInit { // Implements OnInit for AOT
    contacts$: Observable<Contact[]>;
    contactId$: Observable<string>;
    search$: Observable<string>;
    
    constructor(private route: ActivatedRoute) {}
    
    ngOnInit() {
        this.contacts$ = this.route.parent.parent.parent.parent.data.map(data => data['contacts']);
        this.contactId$ = this.route.parent.parent.parent.params.map(params => params['contactId']);
        this.search$ = this.route.queryParams.map(queryParams => queryParams['search']);
    }
}

Because of this limitation I wrote these decorators originally here If your are still using an angular version below 5.2 use that project instead of this one!!

But, angular now supports inheritance parent -> children so I rewrote the old project into this one.

Meaning, you have to set the route's inheritance strategy to always before you can use these decorators

RouterModule.forRoot(routes, {
    paramsInheritanceStrategy: 'always', // 'always', // emptyOnly
})],

DEMO

With the inheritance strategy in place, the above ngOnInit example can be simplified to

this.contacts$ = this.route.data.map(data => data['contacts']);
this.contactId$ = this.route.map(params => params['contactId']);
this.search$ = this.route.queryParams.map(queryParams => queryParams['search']);

No more parent.parent. And finally, using the decorators the component turns into

@Component({
    selector: 'app-contacts',
    templateUrl: './contacts.component.html',
    styleUrls: ['./contacts.component.scss']
})
export class ContactsComponent implements OnInit {
    @RouteData('contacts') contacts$: Observable<Contact[]>;
    @RouteParams('contactId') contactId$: Observable<string>;
    @RouteQueryParams('search') search$: Observable<string>;
    
    constructor(private route: ActivatedRoute) {}
    
    ngOnInit(): void {} // Without this it will not work if AOT enabled
}

The argument of these decorators is optional only if the value is identical to the property name the decorator belongs to (ignoring the '$')

@RouteData() contacts$: Observable<Contact[]>;
@RouteParams() contactId$: Observable<string>;
@RouteQueryParams() search$: Observable<string>;

Although angular took away the inheritance benefit these decorators provided, they can do a lot more, which is describe below.

Real values instead of Observables

If what you need is the actual value instead of an Observable, add the observable: false config option to the decorator

@RouteData('contacts', { observable: false }) contacts: Contact[];
@RouteParams('contactId', { observable: false }) contactId: string;
@RouteQueryParams('search', { observable: false }) search: string;

Unlike the route snapshot, these values are automatically updated whenever the url changes.

Multiple arguments

Above, each route value is injected into its own property on the component. But it is also possible to merge them all into a single object

@RouteParams('userId', 'itemId', 'messageId', {observable: false}) params;
// Usage: this.params.itemId   

or

@RouteParams('userId', 'itemId', 'messageId') params$; 

This can be used for all three decorators.

Route Inheritance

If you turn inheritance on

@RouteData('foo', {inherit: true}) bar$;

data and params will behave exactly like queryParams, meaning that they are globally accessible. In the demo you can see this in action if you click Inherit Routes. This can be used for all three decorators.

Lettable operators

This option lets you apply any lettable operator, like filer or map on the the route data, params and query-params before they propagates to your application.

For example, if you need to ignore empty query params

@RouteQueryParams('search', { observable: false, pipe: [filter(val => val !== '')] }) search: string;

or if values need to be transformed

@RouteData('count', { observable: false, pipe: [map(val => val * 2) }) count: number;

Because it is an array, multiple lettable operators can be added, and will be executed in that same order.

Angular 5.2

Angular now supports paramsInheritanceStrategy, it can be set to always, meaning child routes will have access to all ancestor parameters and data.

Stackblitz demo