router.navigate ne marche pas angular 9

Version imprimable

Bonjour,

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

app.routing

Code:

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:

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:

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

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
 
detailCategorie(id:number){
 
       this.service.getCategorie(id).subscribe(data=>{
        this.categorie = data;
 
     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;
	}
 
     },err=>{
     	console.log("Erreur retourne categorie choisie : ",err);
     });
  }

attention aux observables qui fonctionnent en asynchrone

Bonjour @krakatoa,

même avec ton code, j'ai toujours le même problème, il m'amène bien vers la route souaité , mais après vient un rafraîchissement puis retour vers localhost:4200.

Comment puis contourner cela. Pour être encore un peu plus claire, j'ai sur ma page d'accueil 4 images provenant de mon objet
Code:

1 2 3 4 5 6 7 myCategories = [ {id:1,pictureURL:'asset/mypict1.png',nom:'first'}, {id:2,pictureURL:'asset/mypict2.png',nom:'second'}, {id:3,pictureURL:'asset/mypict3.png',nom:'third'}, {id:4,pictureURL:'asset/mypict4.png',nom:'fourth'} ]
Et je veux au click d'une image (une de ces 4 images)de ma page home.compononent.html, je sois redirigé vers les differents componenet (firstcomponent, secondcomponent, ...).
Et dans home.component.ts , je fais ce traitement là avec detailCategorie.

Comment faire ?

j'ai testé et ça fonctionne chez moi

as tu une erreur dans la console des outils de dev du navigateur ?

j'ai adapté le code et forcé certaines valeurs pour avoir le meme comportement que toi
avec mon code, ça doit toujours sur 'first' quelquesoit le choix donc
et ça fonctionne parfaitement ! (pas de recharge)

#HomeComponent.html

Code:

1
2
3
4
5
6
7
8
9
10
11
12
<p>
  home works!
</p>
 
<!--The content below is only a placeholder and can be replaced.-->
<ng-container *ngFor="let cat of category; let index=index">
  <div>
    <a href="#" (click)="detailCategorie(cat)" >
        {{cat}}
    </a>
  </div>
</ng-container>

#HomeComponent.ts

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 HomeComponent implements OnInit {
  private usersUrl = 'https://jsonplaceholder.typicode.com/users';        // pour tester le fait d'aller chercher des données
  category = [1, 2, 3];                                                   // des données au hasard
 
  constructor(private router: Router, private http: HttpClient) { }
 
  ngOnInit() {
  }
 
  detailCategorie(id){
 
    this.http.get(this.usersUrl).subscribe( (data: any) =>{
 
      // ...
      let nomCategorie = 'first';
 
      switch (nomCategorie) {
      case 'first':
          this.router.navigate(["/firstcomponent"]);
          break;
      case 'second':
          this.router.navigate(["/secondcomponent"]);
          break;
      default:
          console.log("No categorie exists!");
          break;
      }
    });
  }

#AppRoutingModule.ts

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
...
import { HomeComponent } from './home/home.component';
import { FirstComponent } from './first/first.component';
import { SecondComponent } from './second/second.component';
 
const routes: Routes = [
  { path: "", component: HomeComponent },
  { path: "home", component: HomeComponent },
  { path: "firstcomponent", component: FirstComponent },
  { path: "secondcomponent", component: SecondComponent },
 
];
...

07/05/2020, 13h19
lnquaidorsay

Bonjour @dukoid,

j'ai finalement trouvé la solution, il fallait supprimer l'attribut href dans la balise <a>

Encore merci.
07/05/2020, 14h41
dukoid

sinon, si tu utilises ma méthode tu n'a pas besoin d'enlever le href

j'ai compris pourquoi !