Vous détestez les pages qui s'affichent vides pendant que les données chargent ? Le Resolver est la solution. C'est un gardien qui bloque le chargement de la page tant que les données ne sont pas prêtes.
L'utilisateur clique sur le lien ➔ La page s'affiche vide ➔ Un spinner tourne ➔ L'API répond ➔ Les données apparaissent avec un sursaut visuel brutal.
L'utilisateur clique ➔ Le Resolver va chercher les données en coulisses ➔ Une fois prêt, la page s'affiche instantanément avec tout son contenu, d'un coup !
ng generate resolver ...).app.routes.ts avec la clé resolve.this.route.data.subscribe(...).Ces produits n'ont pas eu besoin de spinner d'attente ! Ils étaient déjà prêts avant même que vous n'arriviez sur cette page grâce au Resolver.
import { Routes } from '@angular/router';
import { ResolverComponent } from './resolver.component';
import { ProductsResolver } from './products.resolver';
export const routes: Routes = [
{
path: 'boutique',
component: ResolverComponent,
// On bloque l'accès à la route tant que 'ProductsResolver' n'a pas fini de charger !
resolve: {
mesProduits: ProductsResolver
}
}
];