如何在 Angular 中从同级组件导航到另一个同级组件？

Question

下面是我的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。

哪里做错了？

Answer 1

您可以指定relativeTo哪条路线，如下所示：

import {Router, ActivatedRoute } from '@angular/router';
constructor(private r: ActivatedRoute) { }

viewDetails(details) {
    ...
    this.route.navigate(['../trip-details'], { relativeTo: this.r });
  }

Answer 2

您应该这样导航：

this.route.navigate(['home', 'trip-details']);

或者，将trip-details在路线中上移一层，然后您可以直接使用

导航到它

this.route.navigate(['trip-details']);

Answer 3

因为angular找不到url作为../trip-details

你应该使用this.route.navigate(['/home/trip-details']);

请在url

前面加上'home'

如何在 Angular 中从同级组件导航到另一个同级组件？

how to navigate from sibling component to another sibling component in Angular?

angular-routing

angular