Bonjour,

Je suis en Angular 9 et j'ai créé deux components , first component et second component.

app.routing
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
const routes: Routes = [
  { path: "", component: HomeComponent },
  { path: "home", component: HomeComponent },
  { path: "firstcomponent", component: FirstComponent },
  { path: "secondcomponent", component: SecondComponent },
  { path: "**", component: PagenotfoundComponent }
];

home.component.html
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
<ng-container *ngFor="let cat of category; let index=index">
	 <div>
	   <a href="#" (click)="detailCategorie(cat.id)" >
	      <img [src]="cat.url"
	      [alt]="cat.nom" [title]='cat.nom' />
	   </a>
	 </div>
 </ng-container>

home component.ts
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
detailCategorie(id:number){
 
       this.service.getCategorie(id).subscribe(data=>{
        this.categorie = data;
     },err=>{
     	console.log("Erreur retourne categorie choisie : ",err);
     });
 
     let nomCategorie : string = this.categorie.nom;
 
 
  	switch (nomCategorie) {
    case 'first':
        this.router.navigate(["/firstcomponent"]);
        break;
    case 'second':
        this.router.navigate(["/secondcomponent"]);
        break;
    default:
        console.log("No categorie exists!");
        break;
	}
  }

Mon soucis est quand je clique sur l'image, il me ramène bien vers le path m'affiche le résultat de la page puis la page se rafraîchit toute seule et retourne à HomeComponent(http://localhost:4200).

Que faire sachant qe j'ai essayé les deux possibilités : this.router.navigate(["/secondcomponent"]); et this.router.navigate(["secondcomponent"]);