This library provides three decorators: @RouteData, @RouteParams and @RouteQueryParams. They extract the resolved data, route parameters and query parameters values respectively using the ActivatedRoute.

Its only requirement is that the ActivatedRoute is injected in the component's constructor as route

Stackblitz demo

Without @RouteData / @RouteParams / @RouteQueryParams

@Component({
    selector: 'app-contacts',
    templateUrl: './contacts.component.html',
    styleUrls: ['./contacts.component.scss']
})
export class ContactsComponent implements OnInit {
    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.parent.parent.parent.queryParams.map(queryParams => queryParams['search']);
    }
}

With @RouteData / @RouteParams / @RouteQueryParams

@Component({
    selector: 'app-contacts',
    templateUrl: './contacts.component.html',
    styleUrls: ['./contacts.component.scss']
})
export class ContactsComponent {
    @RouteData('contacts') contacts$: Observable<Contact[]>;
    @RouteParams('contactId') contactId$: Observable<string>;
    @RouteQueryParams('search') search$: Observable<string>;
    
    constructor(private route: ActivatedRoute) {}
}

The argument for both 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>;

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.

Contributors

• @dirkluijk - Suggested to solve the issue using decorators
• @superMDguy - Added @RouteQueryParams() and an option to return actual values instead of Observables