Discussion :

[Grillonfou]

Bonjour à tous,

Je fais face à un soucis qui m'échappe complètement.
Afin de générer des alertes j'ai crée un composant "notification". Ce composant prend en input un champ "name". A chaque instanciation de ce composant, je fais appel à un service du nom de notification.service. Ce service contient deux méthode, dans mon cas uniquement la première nous intéresse. Cette méthode prend en entrée un string (le nom du composant) est l'ajoute à une liste. Tout marche bien pour un composant, le problème apparait lorsque j'en instancie un second, ma liste de notification contenu dans le service est modifié alors qu'elle devrait seulement contenir la liste des composants + le nouveau que je viens d'instancier. Je vous mets les screens des composants + de la console.

Notification.service:


Notification component:


Console:


Comme vous pouvez le voir dans la console, l'instanciation du second composant viens remplacer l'enregistrement du composant à l'indice 0 de ma liste. La seule hypothèse que j'ai c'est que lors de la création de la variable "obj" dans mon service, l'adresse mémoire soit la même que celle de l'obj de l'instance précédente ce qui expliquerait ce changement dans ma liste, mais ca me paraît tiré par les cheveux.

Merci d'avance pour votre aide,

EDIT: Le problème est résolu et l'erreur relève de l'étourderie. Je me suis aperçu qu'en mettant plusieurs composants, tous se mettaient bien mais le dernier ajouté venait remplacer à chaque fois le premier. Et le problème se trouve juste ici:


Lors de l'init de mon composant je viens l'enregistrer dans mon service et je récupère la référence de son objet pour le manipuler plus tard. Le problème est que dans le find, au lieu d'avoir mis un test ("===") j'avais mis à la place une affectation ("="). Forcément lors de la première itération du find le premier élément de ma liste était à chaque fois remplacé par le dernier nom du dernier composant ajouté

En tout cas merci à krakatoa pour son aide !

[krakatoa]

et oui, une instance dans Angular est un singleton.
ceci afin qu'une même instance soit disponible pour tous les composants qui la demande.
par défaut, la portée est : 'root'

si tu veux que ton service ai une porté uniquement au niveau du composant (et ses enfants)
il faut déclarer le service dans le composant :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
@Component({
  selector: 'app-page-qr',
  templateUrl: './page-qr.component.html',
  styleUrls: ['./page-qr.component.scss'],
  providers: [MyService]
})

ainsi le composant aura sa propre instance de : MyService !

[Grillonfou]

Merci pour ta réponse, mais justement je cherche à profiter de l'effet singleton pour partager une même instance de mon service entre plusieurs instance de mon composant. Ce que je ne comprends pas c'est pourquoi la seconde instance de mon composant viens écraser dans la liste de mon service l'enregistrement de la première instance de mon composant

C'est ce que tu peux voir dans le screen de ma console sous le "list apres init du composant". Lors du premier init j'appelle une première fois mon service et je fais un ajout dans mon tableau et lors de la deuxième instanciation de mon composant je fais encore un ajout dans mon tableau, celui-ci se fait bien mais vient écraser le premier.

[krakatoa]

je l'avais pas vu, il te manque

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
@Injectable({
  providedIn: 'root',
})
export class AuthService {

[Grillonfou]

Non plus, pour rendre mes services singleton je passe par le app.module.ts, c'est la seconde possibilité proposée par Angular

[krakatoa]

tu peux me mettre le texte du code, notamment le service
avec les balises <CODE
parceque avec l'image je ne peux pas copier coller !

(je crois que c'est une histoire de référence, je voudrais tester)