使用 angular 路由器实现简单的返回导航

Question

我想在我的 header 中实现一个后退按钮：它将从 child 返回到 parent 路线！

假设我有以下嵌套路由：/ => /bar => /bar/foo

现在，如果我在我的 Foo 组件中添加一个 'Go-Back' 按钮，我可以简单地执行

 this.router.navigate([".."], { relativeTo: this.activatedRoute });

但是，在我的例子中，back-button 在 header（AppComponent）中，这意味着上面的代码不起作用，我猜 ActivatedRoute 指向 /

Stackblitz

所以，我的问题是，如何在没有 ActivatedRoute 的情况下导航回（child 到 parent）？

更新：我仍在研究这个解决方案，我觉得它应该可行（但现在不行）：

 const activatedRoute = this.injector.get(ActivatedRoute);
 this.router.navigate(['..'], { relativeTo: activatedRoute });

Stacblitz

Answer 1

您应该尝试 Location 服务

import { Component } from "@angular/core";
import { Location } from "@angular/common";

@Component({
  selector: "my-app",
  template: `
    <div class="container">
      <button (click)="goBack()">Go Back</button><br />
      <a routerLinkActive="active" routerLink="/bar">Bar</a>

      <router-outlet></router-outlet>
    </div>
  `,
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  constructor(private location: Location) {}

  goBack(): void {
    this.location.back();
  }
}

Answer 2

使用全局 window api: window.history.back();

使用 angular 路由器实现简单的返回导航

Implement simple back navigation with angular router

angular-routing

angular