可观察的角度导航路由器无法工作

Question

我的主文件 html 组件中有 un 按钮，当我调用 router.navigate['path'] 时，单击此按钮不起作用。

当我点击图片按钮时，我会在页面重新加载后重定向到正确的路径并返回 localhost:4200。

谁能帮帮我？

enter code here
<pre>
const routes: Routes = [
         { path: "", component: HomeComponent },
         { path: "home", component: HomeComponent },
         { path: "firstcomponent", component: FirstComponent },
         { path: "secondcomponent", component: SecondComponent },
         { path: "**", component: PagenotfoundComponent }
  ];
<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>
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);
 });

}

Answer 1

我认为您应该从链接中删除 href="#"。我的解决方案是：

<a (click)="detailCategorie(cat.id)" >
  <img [src]="cat.url"
  [alt]="cat.nom" [title]='cat.nom' />