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

【问题标题】：How to implement back button in Angular for navigating previous page?如何在 Angular 中实现后退按钮以导航上一页？
【发布时间】：2021-03-31 13:33:40
【问题描述】：

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

任何帮助将不胜感激。

【问题讨论】：

标签： javascript angular typescript routes

【解决方案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。

【讨论】：

谢谢，但我不确定应该在哪里应用这些代码块。你的意思是把所有的参数都传给x-component并订阅list-component中的路由参数？
@Fredrick 不，您不需要将参数传递给x-component，因为当您返回时，上述对 URL 参数的订阅将确保 pageIndex 获取最后一个值而不是重置到第一页。
谢谢，但是我应该在哪里设置pageIndex 参数？当我在列表组件中设置该参数时，我不确定是否应该从详细信息组件传回一些其他参数。我使用this._location.back(); 导航返回而不传递任何参数。
另一方面，我想知道不是将参数从列表传递到详细信息，然后再从详细信息传递到列表，将这些参数保存在中会更好列表组件（可能通过一个类），然后在列表的 onInit 方法中检索它们而不对详细信息组件进行任何修改？
顺便说一句，非常感谢您的宝贵帮助并投了赞成票；）

【解决方案2】：

您可以使用sessionStorage。

在x-component 中，将pageIndex 与此一起保存。

sessionStorage.setItem('pageIndex', pageIndex);

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

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

【讨论】：

【解决方案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()  
}

它会带你到上一页:)

【讨论】：

如何获取之前在list-component中设置的参数？
@Fredrick 我编辑了一些新代码，检查一下
我认为存在误解。有 2 个组件，我在列表组件中有一些参数。然后导航到详细信息组件。而当再次回到列表页面时，我需要获取之前设置的参数。但是您只是在没有任何参数恢复的情况下对 details 组件进行了实现。