Angular

Appearance

Comment utiliser Resolve sur les routeurs sur Angular ? ​

Pour utiliser Resolve sur les routeurs sur Angular, vous devez d'abord créer un service de résolution en implémentant l'interface Resolve. Cette interface définit une méthode resolve() qui sera appelée par le routeur avant de charger la route. Vous pouvez utiliser cette méthode pour obtenir les données dont vous avez besoin pour afficher la vue de la route, par exemple en effectuant une requête HTTP vers un service de données.

Voici un exemple de service de résolution qui récupère des données de produits à partir d'un service de données :

ts
import { Injectable } from '@angular/core';
import { Resolve, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { Observable } from 'rxjs';

import { ProductService } from './product.service';

@Injectable({
  providedIn: 'root'
})
export class ProductResolver implements Resolve<Observable<any>> {

  constructor(private productService: ProductService) {}

  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<any> {
    return this.productService.getProducts();
  }
}
import { Injectable } from '@angular/core';
import { Resolve, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { Observable } from 'rxjs';

import { ProductService } from './product.service';

@Injectable({
  providedIn: 'root'
})
export class ProductResolver implements Resolve<Observable<any>> {

  constructor(private productService: ProductService) {}

  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<any> {
    return this.productService.getProducts();
  }
}

Pour utiliser ce service de résolution dans votre routeur, vous devez l'inclure dans la configuration de la route en utilisant la propriété resolve :

ts
import { ProductResolver } from './product-resolver.service';

const routes: Routes = [
  {
    path: 'products',
    component: ProductListComponent,
    resolve: {
      products: ProductResolver
    }
  }
];
import { ProductResolver } from './product-resolver.service';

const routes: Routes = [
  {
    path: 'products',
    component: ProductListComponent,
    resolve: {
      products: ProductResolver
    }
  }
];

Enfin, vous pouvez accéder aux données résolues dans le composant de la route en utilisant la propriété data de l'objet ActivatedRoute :

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

export class ProductListComponent implements OnInit {
  products: any;

  constructor(private route: ActivatedRoute) {}

  ngOnInit() {
    this.products = this.route.snapshot.data.products;
  }
}
import { ActivatedRoute } from '@angular/router';

export class ProductListComponent implements OnInit {
  products: any;

  constructor(private route: ActivatedRoute) {}

  ngOnInit() {
    this.products = this.route.snapshot.data.products;
  }
}