Skip to content

Qu'est ce que useExisting dans les providers d'Angular ?

useExisting est utilisé dans les providers de l'injecteur de dépendances d'Angular pour indiquer que la valeur fournie par le fournisseur doit être utilisée au lieu de créer une nouvelle instance de la classe fournie. Cela peut être utile dans des situations où vous souhaitez utiliser une instance unique d'un service dans plusieurs composants de votre application.

INFO

Vous pouvez utiliser useExisting de cette manière pour étendre ou surcharger les fonctionnalités d'un service existant sans avoir à créer une nouvelle instance de celui-ci. Cela peut être particulièrement utile lorsque vous travaillez avec des services qui sont configurés pour être partagés au niveau de l'application (c'est-à-dire lorsqu'ils sont fournis avec providedIn: 'root').

Exemple

Voici un exemple concret d'utilisation de useExisting dans un projet Angular :

Dans ce cas, nous avons un service LoggerService qui enregistre des messages dans la console. Nous voulons créer un alias pour ce service appelé DebugLoggerService qui enregistre également des messages dans la console, mais qui ajoute également la date et l'heure de chaque message.

Voici comment nous pourrions le faire :

ts
import { Injectable } from '@angular/core';

@Injectable()
export class LoggerService {
  log(message: string) {
    console.log(message);
  }
}

@Injectable({
  providedIn: 'root',
  useExisting: LoggerService
})
export class DebugLoggerService {
  log(message: string) {
    console.log(`[${new Date().toISOString()}] ${message}`);
  }
}

Maintenant, nous pouvons injecter DebugLoggerService dans n'importe quel composant ou service de notre application et utiliser la méthode log pour enregistrer un message dans la console, qui sera préfixé par la date et l'heure. Cependant, sous le capot, cela utilisera en réalité l'instance de LoggerService existante et appelera la méthode log de cette instance.

[Vidéo] Les signaux dans Angular en 3mn

En juillet, recevez notre newsletter avec les dernières actualités et, en avant-première, un lien vers notre prochaine vidéo sur les signaux dans Angular.