如何在 Angular 中从同级组件导航到另一个同级组件? [英] how to navigate from sibling component to another sibling component in Angular?
本文介绍了如何在 Angular 中从同级组件导航到另一个同级组件?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
下面是我的app.routing.ts
export const Approute: Routes = [
{
path: 'login',
component: LoginComponent
},
{
path: 'home',
component: HomeComponent,
children: [
{
path: 'dashboard',
component: DashboardComponent
},
{
path: 'trip-details',
component: TripDetailsComponent
}
]
},
{ path: 'not-found', component : NotFoundComponent },
{ path: '**', redirectTo: '/not-found' }
];
component.ts
viewDetails(details) {
...
this.route.navigate(['../trip-details']);
}
上面我有一个组件,正在尝试导航到另一个同级组件,但无法导航到 http://localhost:4200/home/trip-details
它将我重定向到 http://localhost:4200/not-found
.
Above i have a component and am trying to navigate to another sibling component but am not able to navigate to http://localhost:4200/home/trip-details
its redirecting me to http://localhost:4200/not-found
.
哪里做错了?
推荐答案
可以指定relativeTo
哪个路由如下图:
You can specify relativeTo
which route as shown below:
import {Router, ActivatedRoute } from '@angular/router';
constructor(private r: ActivatedRoute) { }
viewDetails(details) {
...
this.route.navigate(['../trip-details'], { relativeTo: this.r });
}
这篇关于如何在 Angular 中从同级组件导航到另一个同级组件?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文