Angular 5路由跳转：如何无需完整路径切换父路由节点

Absolutely! You don’t have to rely on messy string replacement or regex hacks. Angular’s Router has native ways to handle this cleanly, so you can avoid hardcoding the full child path.

Here’s how to do it right #

Instead of trying to use a '...' syntax (which isn’t supported out of the box), you can leverage Angular’s route APIs to grab the existing child segments and reuse them when navigating to parentTwo.

Option 1: Manipulate the URL Tree (most reliable) #

Angular’s UrlTree lets you safely modify parts of the current URL without string manipulation:

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

constructor(private router: Router) {}

// ...

const urlTree = this.router.parseUrl(this.router.url);
const primarySegments = urlTree.root.children['primary'].segments;

// Find the index of 'parentOne' in the route segments
const parentOneIndex = primarySegments.findIndex(seg => seg.path === 'parentOne');

if (parentOneIndex !== -1) {
  // Replace 'parentOne' with 'parentTwo'
  primarySegments[parentOneIndex].path = 'parentTwo';
  // Navigate to the modified URL
  this.router.navigateByUrl(urlTree);
}

This approach is robust because it works with Angular’s internal route structure, not raw strings—so it handles query params, fragments, and nested routes correctly.

Option 2: Relative Navigation (if your route hierarchy is consistent) #

If parentOne and parentTwo are direct siblings (share the same parent route), you can use relative navigation to jump up one level, switch to parentTwo, and keep the current child path:

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

constructor(private router: Router, private route: ActivatedRoute) {}

// ...

// Navigate up from the current route to the parent of 'parentOne', then to 'parentTwo'
this.router.navigate(['../../parentTwo'], { relativeTo: this.route });

Note: The number of ../ depends on where your component is loaded. If your component lives in the child route, you’ll need two ../ to get past param1/param2 and up to the parent of parentOne. Adjust based on your specific route hierarchy.

Why your proposed ['parentTwo', '...'] won’t work #

Angular’s Router.navigate() doesn’t support a '...' wildcard to "keep the rest of the path". You have to explicitly capture and pass the existing child segments, or use the URL tree method above.

How this beats your current regex solution #

Your regex approach works for simple cases, but it’s fragile. If parentOne ever appears elsewhere in the URL (like in a query param or nested route), or if you add query params/fragments, the regex could break. Using Angular’s native APIs ensures your navigation stays reliable even as your route structure evolves.

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