Angular 2 : Fonctionnalité partagée entre tous les components

Bonjour à tous,

Je m'interroge sur la bonne façon d'afficher un message d'erreur dans mon application quand une requête vers l'API échoue.

J'ai un service qui me permet de requêter mon api.
Plusieurs composants (équivalent à des pages dans mon cas) utilise ce service. Par exemple :

Code:

---

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

export class StatusComponent implements OnInit {   private api: ApiService;   ngOnInit() { this.fetchDatas(); }   fetchDatas() { this.api.getSystemStatus().subscribe( datas => { //Traitement des données   }, error => { let code = parseInt(error.status, 10); if (code == 403) { this.api.clear(); this.router.navigateByUrl('/login'); } else { console.error("Can't fetch System status : " + error.statusText);   //Afficher message d'erreur "global" }   } ); } }

---

J'aimerais donc au niveau de chaque composant pouvoir déclencher l'affichage d'un message d'erreur. Dans l'idéal j'aimerais ne pas avoir un dupliquer un div dans l'html de mes composants qui afficherais le messages.

Faut il que je créer un composant "MessageErreur" que les autres composant utiliserait ? Y'a t'il d'autre solution plus élégante ? peut être au niveau de app.component ?

Merci pour vos lumières

dans app.component.html on ajoute une balise message d'erreur

les composants enfants envoient leurs messages via un événement pour remonter à l'app.composant (parent donc).

Ok donc , il faut passer par un eventEmitter sur mes composants et le app.component recevra l'event.

Sauf que dans mon cas j'ai un router-outlet dans mon app.component.html et que à priori l'eventEmitter ne remonte pas.

A priori il faudrait que je passe par un service partagé entre le app.component et mes autres component.

J'ai bon ou je me complique la vie ?

en effet, si ça se trouve dans le <router-outlet> ça ne remonte pas l'event jusque là.
donc là, t'es bien obligé d'utiliser un service.

mais bon rien ne t’empêche de mettre la balise d'erreur à coté du <router-outlet>.

pour ma part, j'ai fais ainsi :

Code:

---

1 2 3 4 5 6 7 8

<ic-header></ic-header> // + menu principal   <err-message></err-message> // je mettrai ici l'affichage des erreurs ....   <router-outlet></router-outlet>   <ic-footer></ic-footer>

---