Angular中如何从同级组件导航至另一同级组件？附我的代码

Hey there! Let's fix that navigation issue between your sibling components (DashboardComponent and TripDetailsComponent) under the HomeComponent parent route.

First, let's break down your routing setup: you have home as a parent route with two child routes (dashboard and trip-details) — these are the sibling components you want to navigate between.

Why Your Current Code Isn't Working #

Your existing navigation code this.route.navigate(['../trip-details']) is missing a critical piece: relative route context. Without specifying which route to base the relative path on, Angular will try to resolve the path from the root route instead of your current child route (dashboard). This leads to an invalid path (like /trip-details instead of /home/trip-details), triggering your not-found redirect.

Correct Solutions #

1. Relative Route (Recommended for Component-Centric Navigation)

To use relative paths properly, you need to inject both Router and ActivatedRoute into your component, then specify the relativeTo option to anchor the navigation to your current active route.

First, update your component imports and constructor:

import { Router, ActivatedRoute } from '@angular/router';

constructor(
  private router: Router,
  private activatedRoute: ActivatedRoute // This gives us the current route context
) {}

Then adjust your navigation method:

viewDetails(details) {
  // ... your existing logic here
  this.router.navigate(['../trip-details'], { relativeTo: this.activatedRoute });
}

• ../ moves up one level from the current dashboard route to the parent home route
• trip-details then targets the sibling child route under home
• { relativeTo: this.activatedRoute } tells Angular to resolve the path relative to your current active route

2. Absolute Route (Simpler for Fixed Paths)

If you prefer a more straightforward approach that doesn't depend on the current route context, use the full absolute path:

viewDetails(details) {
  // ... your existing logic here
  this.router.navigate(['/home/trip-details']);
}

This directly targets the full path of your sibling component, so it works regardless of where you're navigating from (as long as the route structure stays the same).

Quick Check #

Make sure:

• You've imported RouterModule in your AppModule and configured your routes correctly (which you already have)
• The HomeComponent includes a <router-outlet></router-outlet> to render its child components — without this, the sibling components won't display even after navigation.

内容的提问来源于stack exchange，提问作者VIK6Galado