在 Angular 中，如何使用 `href` 导航到相对路径？

Question

我正在使用带 Angular 的 Ionic（即和 @angular/router），但我相信这个问题也与没有 Ionic 的 Angular 有关。

如何使用 href 导航到相关文件夹？

我有这个结构：

(root)
..A
....B1
....B2

当我导航到 /A/B1 时 - B1 组件被渲染。在里面，我有这个 HTML:

<ios-button href="../B2">Click Me</ios-button>

我希望单击按钮导航到 /A/B2，但它导航到 /B2。

我也试过 href="./../B2" 但它给出了相同的结果。

如果我使用完整路径 (href="/A/B2") 就可以了。

如何使用部分（即相对）路径实现我的预期结果？

Answer 1

您可以选择像这样实现它，在您的组件中处理重定向

有关 Angular's specifying-a-relative-route 文档的更多信息

@Component({...})
export class TestComponent {

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

   navigateTo(path: string): void {
       this.router.navigate([path], { relativeTo: this.route });        
   }
}

有了这个 { relativeTo: this.route } 并且如果你有一条路径 ../B2，你就是在告诉 Angular 从当前路线开始，向后退 1 步并转到 B2

模拟父路由： http://localhost:4200/parent

示例 #1

// This will be http://localhost:4200/parent/B2
this.router.navigate(['B2'], { relativeTo: this.route });

示例 #2

// This will be http://localhost:4200/B2
// As this goes up one level
this.router.navigate(['../B2'], { relativeTo: this.route });

注意：

在处理路由重定向时，最好在模板中使用 [routerLink]="" 而不是 href
- 访问级别提高 <a [routerLink]="[../B2]">B2</a>
- 如果只有一级，<a [routerLink]="'B2'">B2</a>里面有单引号
或者如果您要在组件中处理重定向，您将使用 @angular/router
中的 Router

已创建Stackblitz Demo供您参考

在 Angular 中，如何使用 `href` 导航到相对路径？

In Angular, how to navigate to a relative path with `href`?

angular

angular-router