以下是我的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
。
哪里出错?
答案 0 :(得分:2)
您可以指定relativeTo
哪条路线如下所示:
import {Router, ActivatedRoute } from '@angular/router';
constructor(private r: ActivatedRoute) { }
viewDetails(details) {
...
this.route.navigate(['../trip-details'], { relativeTo: this.r });
}
答案 1 :(得分:2)
你应该像这样导航:
this.route.navigate(['home', 'trip-details']);
或者,将行程详细信息在路线中移动一级以上,然后您可以使用
直接导航到它this.route.navigate(['trip-details']);
答案 2 :(得分:2)
因为角网格无法找到../trip-details
您应该使用this.route.navigate(['/home/trip-details']);
Juse add' home'在网址前面