角度路由和导航

问题描述

我的app.component.html很轻

<div class="landing-page">
   <div class="main">
      <router-outlet></router-outlet>
      <div class="footer"> 
         <div class="logo-wrapper">
            <a routerLink="/"><img src="assets/images/logo.png" srcset="assets/images/[e-mail] 2x,assets/images/[e-mail] 3x" /></a>
         </div>
      </div>
   </div>
</div>

我在 AppRoutingModule 中定义了以下路由：

const routes: Routes = [    
  { path: 'book/:id',component: BookComponent },{ path: '**',component: LandingPageComponent }
];

在我的 LandingPageComponent 中，我像这样导航到 book：

constructor(private router: Router) { 
}

OpenBookComponent(id){        
    this.router.navigate(["/book",id],{skipLocationChange: true});
}

到目前为止，一切都很完美。

导航到 ["/"]

返回主页面时出现问题

在浏览器中点击返回 < 或以编程方式尝试从 BookComponent 导航到基本链接，在地址栏中显示完整路径（即：http://localhost:4200/book/123）并导致只显示页脚

我在 BookComponent 中返回的代码是：

constructor(private route: ActivatedRoute,private router: Router) { 
    
}
ngOnInit() {        
    this.id = this.route.snapshot.paramMap.get('id');       
}
closeBook(){      
   this.router.navigate(["/"],{skipLocationChange: true});
}

返回时如何清除地址中的所有参数，使其仅保留 / 或 http://localhost:4200 ？

解决方法

您不必删除参数。您必须像这样添加一条新路线：

const routes: Routes = [
  { path: 'book/:id',component: BookComponent },{ path: '',component: LandingPageComponent },{ path: '**',component: LandingPageComponent }
];

现在如果你想导航到"['/']"，你可以这样写，例如：

<a [routerLink]="['/']" class="nav-link active">Back</a>

现在它会显示组件，您在 angular routes 数组中的 '' 后面写入了该组件，在本例中为 LandingPageComponent。