Skip to content

Services

Définition d'un service

Rien de particulier pour définir un service, il suffit de créer une classe.

1
2
3
4
5
6
7
export class LoggingService {
    private stream = console;

    log(message: string) {
        this.stream.log(message);
    }
}

Injection d'un service

Pour injecter un service dans un contrôleur, il suffit d'ajouter un paramètre constructeur du type de service attendu.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
import {Component} from '@angular/core';
import {LoggingService} from '../logging.service';

@Component({
  selector: 'app-new-account',
  templateUrl: './new-account.component.html',
  styleUrls: ['./new-account.component.css'],
  providers: [LoggingService]
})
export class NewAccountComponent {
  constructor(private loggingService: LoggingService) {
  }

  onCreateAccount(accountName: string, accountStatus: string) {
    this.loggingService.logStatusChange(accountStatus);
  }
}

Hiérarchie d'injection

Un composant Angular déclarant un paramètre providers se verra créé une instance dédiée du composant visé.

Tous les enfants de ce composants se verront partager la même instance, sauf si un composant enfant définis aussi un paramètre providers, dans quel cas il aura à son tour une nouvelle instance, partagée entre lui et tous ses enfants.

Le point d'initialisation le plus global est AppModule, qui rendra l'instance disponible à tout angular, y compris à d'autres services.

Le second point d'initialisation "global" est AppComponent, le composant global.

Injection de service dans une classe sans métadonnée

Une classe sans métadonnée (comme un service) ne pourra pas recevoir d'instance injectée. Comment faire, dans ce cas?

Il suffit de marquer la classe comme @Injectable().

Recommandations

Pour accéder à des données d'un service, il vaut mieux récupérer une copie de la liste de données en question, plutôt que récupérer la référence, pour garantir qu'elle ne sera pas modifiée.

Pour remonter l'évènement de changement du contenu de la liste, il faut ajouter un EventEmitter en membre du service, sur lequel la vue s'inscrira pour dynamiquement changer son tableau local.