Angular Route Resolver

JS
S
JavaScript

A route resolver and allows your application to fetch data before RESOLVING the route.

1import { Injectable } from '@angular/core';
2import { APIService } from './api.service';
3
4import { Resolve } from '@angular/router';
5
6import { ActivatedRouteSnapshot } from '@angular/router';
7
8@Injectable()
9export class APIResolver implements Resolve<any> {
10  constructor(private apiService: APIService) {}
11
12  resolve(route: ActivatedRouteSnapshot) {
13    return this.apiService.getItems(route.params.date);
14  }
15}
16
17
18// ========================================================================
19{
20  path: 'items/:date',
21  component: ItemsComponent,
22  resolve: { items: APIResolver }
23}
24
25
26// ========================================================================
27  ngOnInit() {
28    this.items = this.route.snapshot.data['items'];
29  }

Created on 7/2/2019