如何解决角度路由和导航
我的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/logo@2x.png 2x,assets/images/logo@3x.png 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
。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。