📢 Je vous présente le livre Angular

  • 1) Il offre un contenu clair et concis, tout en couvrant une multitude de concepts d'Angular.
  • 2) Le livre est structuré en trois niveaux : débutant, intermédiaire et avancé
  • 3) traite des pratiques les plus récentes d'Angular, comme les signaux, les vues différées, la gestion des flux, entre autres
  • 4) De plus, vous y trouverez plusieurs liens vers des exemples de code source pour approfondir vos connaissances en pratique.
Consulter un extrait

Skip to content

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 :

plaintext
app/
|- user-resolver.service.ts
|- user.service.ts
|- user.interface.ts
|- app.component.ts
|- app.router.ts
|- app.config.ts
|- user-list.component.ts
plaintext
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
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<User> => {
  const userService = inject(UserService);
  return userService.get(route.params['userId'])
};
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}`);
  }
}
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 :

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 :

ts
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;
  }
}

Chaque mois, recevez en avant-première notre newsletter avec les dernières actualités, tutoriels, astuces et ressources Angular directement par email !