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)

[Grillonfou]

Oui bien sûr, je pense aussi à une erreur de référence mais j'arrive pas à voir où:

Service:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
import { Injectable } from '@angular/core';
 
@Injectable()
export class NotificationService {
 
  listNotification: any[] = []
  constructor() { }
 
  setNew(n: string){
    let obj: any = {
      name: n,
      hidden: true,
      type: '',
      message: ''
    };
    if(this.listNotification.find(element=>element.name === obj.name)===undefined){
      this.listNotification.push(obj);
    }
 
    console.log("Objet à insérer après l'init du composant:")
    console.log(obj);
    console.log('List apres init du composant:');
    console.log(this.listNotification);
  }
 
  setAlert(name: string, type: string, message: string){
    console.log(this.listNotification);
      let obj = this.listNotification.find(element => element.name === name);
      obj.hidden = false;
      obj.type = type;
      obj.message = message;
      setTimeout (() => {
        obj.hidden = true;
     }, 5000);
  }
}

Composant:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
import { Component, Input, OnInit } from '@angular/core';
import { NotificationService } from '../services/notificationService';
 
 
@Component({
  selector: 'app-notification',
  templateUrl: './notification.component.html',
  styleUrls: ['./notification.component.scss']
})
export class NotificationComponent implements OnInit {
 
  @Input() name = '';
  info: any = {};
  static indice: number = 1;
 
  constructor(private notificationService: NotificationService) {}
 
  ngOnInit(): void {
    console.log("Nombre d'init du composant: ")
    console.log(NotificationComponent.indice);
    NotificationComponent.indice++;
 
    this.notificationService.setNew(this.name);
    this.info = this.notificationService.listNotification.find(element => element.name = this.name);
 
    console.log("info: ");
    console.log(this.info);
  }
 
  onClickInput(){
    this.info = this.notificationService.listNotification.find(element => element.name = this.name);
    this.info.hidden = true;
  }
}

[krakatoa]

j'ai testé rapidement ici :
https://stackblitz.com/edit/angular-ivy-jxhxvu
et ça fonctionne !



tu peux tester ça et donner le résultat :

Code :

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

1
2
3
4
  setNew(n: string){
    console.log('n', n);
   ...

[Grillonfou]

La seule différence c'est que tu as utilisé deux composants distincts alors que moi j'utilise le même composant mais avec plusieurs instances, chose que j'ai déjà fait par le passé et qui ne m'a jamais posé problème,

Pour le test:


En tout cas merci du temps que passes à m'aider

[krakatoa]

essaye :

Code :

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

1
2
3
4
5
6
7
   const obj: any = {
      name: n,
      hidden: true,
      type: '',
      message: ''
    };

tu devrais avoir :
0: {n ame: 'generationOgp
1: {name: 'gestionFroupement

[Grillonfou]

Malheureusement j'ai déjà essayé aussi et même résultat

[krakatoa]

tu devrais avoir :
0: {n ame: 'generationOgp
1: {name: 'gestionFroupement


c'est ça ?

[Grillonfou]

Oui c'est ça, et j'arrive pas à comprendre comment en un push une valeur peut être ajoutée et une autre modifiée. La seule explication que j'ai c'est que les deux objets ont la même référence ce qui me paraît étrange

[krakatoa]

et ça, au lieu du push :
et met const obj .......

Code :

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

1
2
3
4
5
 
      this.listNotification[
          ...this.listNotification,
          obj
      ];

[Grillonfou]

Désolé mais je crois pas connaitre ou avoir compris cette notation

[krakatoa]

ça fonctionne ou pas ?

[Grillonfou]

Non toujours pas

[krakatoa]

Code :

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

1
2
3
4
      this.listNotification[                // une nouvelle reference
          ...this.listNotification,          // on ajoute le contenu du tableau
          obj                                    // + un nouveau élément
      ];

bon, faut que je me concentre

comment se fait le 2eme appel ?

[Grillonfou]

Même principe que pour le premier, dans le .html je crée un nouveau composant et dans le ngOnInit je fais appel au service. Et comme on peut le voir dans la console, le deuxième appel se fait bien comme il faut

[krakatoa]

Code :

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

1
2
3
4
5
6
7
8
9
    if (
      this.listNotification.find(element => element.name === obj.name) ===
      undefined
    ) {
      console.log('obj avant push=', obj);
      console.log('this.listNotification  avant push', this.listNotification);
      this.listNotification.push(obj);
    }