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.

Tout d'abord, voici un exemple simple d'une structure de service de résolution :

Structure pour l'exemple

app/
|- user-resolver.service.ts
|- user.service.ts
|- user.interface.ts
|- app.component.ts
|- app.router.ts
|- app.config.ts
|- user-list.component.ts

Mieux structuré :)

app/
|- services/
|  |- user.service.ts
|  |- user.interface.ts
|  |- resolvers/
|     |- user-resolver.service.ts
|- app.component.ts
|- app.router.ts
|- app.config.ts
|- pages/
|  |- user-list.component.ts

user-resolver.service.ts

import { inject } from '@angular/core';
import { ResolveFn } from '@angular/router';
import { Observable } from 'rxjs';
import { User } from './user.interface';

export const userResolver: ResolveFn<User> = (
  route,
  state
): Observable<Product> => {
  const userService = inject(UserService);
  return userService.get(route.params['userId'])
};

user.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { User } from './user.interface';

@Injectable({
  providedIn: 'root'
})
export class UserService {
  http = inject(HttpClient);

  get(userId: number): Observable<User> {
    return this.http.get<User>(`/api/users/${productId}`);
  }
}

user.interface.ts

export interface User {
  id: number;
  name: string;
}

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. Allons dans app.router.ts :

import { Routes } from '@angular/router';
import { UserListComponent } from './user-list.component';
import { userResolver } from './user-resolver.service';

const routes: Routes = [
  {
    path: 'user/:userId',
    component: UserListComponent,
    resolve: {
      user: userResolver
    }
  }
];

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 :

import { Component, OnInit, inject } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { User } from './user.interface';

@Component({
  selector: 'app-user-list',
  standalone: true,
  templateUrl: `
    <h1>User</h1>
    <p>{{ user.name }}</p>
  `
})
export class UserListComponent implements OnInit {
  private route = inject(ActivatedRoute);
  user: User = {} as User

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