Lab 09 : Resolver

📖 Ressources

• Documentation sur les resolvers de route
• Opérateurs RxJS

🚀 Code de départ

step-5-album-wholesale-v16-post-add-custom-async-validator

Continuez depuis le résultat du Lab 08. Si vous avez besoin d'une copie fraîche, utilisez step-5-album-wholesale-v16-post-add-custom-async-validator comme base et complétez d'abord les Labs 05–08.

Dans ce lab, vous allez utiliser un resolver de route pour pré-charger les données d'un album avant de naviguer vers la page d'édition. Vous allez créer un resolver fonctionnel qui charge les données depuis le service, le configurer dans la définition de route, et accéder aux données résolues dans votre composant.

📝 Instructions

Étape 1 : Créer le resolver

Créez un resolver fonctionnel :

import { ResolveFn } from '@angular/router';
import { inject } from '@angular/core';

export const albumResolver: ResolveFn<Album | null> = (route, state) => {
  const albumService = inject(AlbumService);
  const id = Number(route.paramMap.get('id'));

  return albumService.getAlbumById(id).pipe(
    catchError(() => of(null))
  );
};

Étape 2 : Ajouter à la route

Ajoutez le resolver à la configuration des routes :

const routes: Routes = [
  {
    path: 'albums/edit/:id',
    component: AlbumEditComponent,
    resolve: { album: albumResolver }
  }
];

Étape 3 : Accéder aux données résolues

Récupérez les données dans le composant :

export class AlbumEditComponent implements OnInit {
  private route = inject(ActivatedRoute);

  ngOnInit() {
    const album = this.route.snapshot.data['album'] as Album;
    if (album) {
      this.albumForm.patchValue(album);
    }
  }
}