angular-route-xxl

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

IMPORTANT: Only use this library if you're using an angular version below 5.2. For 5.2 and above this library is rewritten and available in angular-xxl

All decorators require that the ActivatedRoute is injected in the component's constructor as route and that the component has the ngOnInit function defined.

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) {}
    
    ngOnInit(): void {} // Without this it will not work if AOT enabled
}

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.

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.

RouteTunnel

This decorator is different from the other three, it allows you to setup communication between instances of the same components/class.

For example, consider the following sibling components

   <app-foo></app-foo>
   <app-foo></app-foo>

If, for whatever reason, you want them to be able to communicate using @RouteTunnel do

    @Component({ ... })
    export class FooComponent implements ngOnInit {
        @RouteTunnel() tunnel$;
        
        constructor(private route: ActivatedRoute) {}
        
        ngOnInit(): void {
            this.tunnel$.subscribe(data => {
                if (data.sender !== this) { ... }
            });
        }
        
        doFooBarAction(): void {
            this.tunnel$.next({sender: this, action: 'foobar'});
        }
    }

The tunnel-decorator is not limited to sibling components only, it can also go straight through routes! If you want to see this in action, go to the demo and click on a route. The ripple effect is just that!

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.

Contributors

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