如何在 Angular 中实现后退按钮以导航上一页？

Question

我有一个list-component ，我想在导航到另一个组件之前通过在另一个 class 中设置一些变量来保留pageIndex值，比如说x-component 。 然后，当导航回list-component时，我想获取先前设置的pageIndex以便打开该页面而不是打开数据表上的第一页。 那么，在不使用服务或订阅的情况下解决此问题的一种优雅方法是什么？ 我可以使用另一个 class，但不能使用服务。 我试图从 class 中检索设置值，但在尝试检索时pageIndex值未定义。

任何帮助，将不胜感激。

Answer 1

您还可以将pageIndex作为呈现list-component的页面的 URL 参数。

注入你的ctor：

private route: ActivatedRoute

然后在您的ngOnInit中执行以下操作：

this.route.params.subscribe((params: any) => {
    if (params.pageIndex) {
        this.pageIndex = params.pageIndex;
    }
});

在您的路由模块中，您的 URL 应该匹配： some-url/:pageIndex 。 在列表中来回翻页时，URL 应相应更新。

Answer 2

您可以使用sessionStorage 。

在x-component中，用 this 保存pageIndex 。

sessionStorage.setItem('pageIndex', pageIndex);

然后像这样在list-component中加载这个值。

public pageIndex = Number(sessionStorage.getItem('pageIndex') ?? 0);

Answer 3

import { Location } from '@angular/common';

previousUrl: string;
constructor(private location: Location,private router: Router){ }

goBackFunction(){
router.events
.pipe(filter(event => event instanceof NavigationEnd))
.subscribe((event: NavigationEnd) => {

      console.log('prev:', event.url);
      this.previousUrl = event.url;
});

 this.location.back()  
}

它将带您到上一页:)