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"]);
Partager