时间戳

首页 > 解决方案 > 如何在角度 9 中实现后退按钮

html - 如何在角度 9 中实现后退按钮

问题描述

我正在实施一个只有两个 UI 的小项目。

1-第一个 UI 称为 Home，其中包含分页用户列表the home component。

2-第二个 UI 称为用户详细信息，其中包含用户配置文件the user-details component

3-当然还有包含工具栏的应用程序组件和router-outlet

让我们假设以下场景

我在homeUI 和分页用户列表的第二页中，我单击了其中一个用户项，然后user-detailsUI 出现了，我现在在第二个 UI 中，现在我想导航回主页但是这样做时，homeUI 被重新创建并成为用户列表的第一页，而不是我们离开它的第二页，因为这是我的后退按钮代码

<img
  routerLink = "/home" style="cursor: pointer;"
    width="40"
    alt="Angular Logo"
 />
  <span routerLink = "/home" style="cursor: pointer;">Users</span>

我的问题是：有什么方法可以实现它，它不会重新创建主页i.e.实现后退按钮的正确行为？

标签： htmlangulartypescriptangular9

解决方案

有几种方法可以解决这个问题。

如果您使用的是分页库（例如 ngx-pagination），那么希望分页组件接受当前页面的输入。然后，您需要通过服务或在持久存储中跟踪该页面。每当您路由回 Home UI 时，获取您所在的页面并将其加载回分页组件。

另一种方法是使用路由器参数。通过稍微修改您的网址，它们可以采用以下形式：

  • /home/1
  • /home/2
  • /home/3

单击第 2 页中的用户可以给出 url：（/home/2/user-id只是一个示例）

您的 home 组件的路径可能如下所示：

const routes: Routes = [
  { path: "home/:pageNumber", component: HomeComponent }
];

加载 home 组件后，您可以按如下方式获取路由器参数（我使用的是 Router 方法，但您也可以手动解析 URL）：

export class HomeComponent implements OnInit {
  constructor(private router: Router) {
    const pageNumber = this.router.navigationExtras.params['pageNumber'];
  }
}

然后，您可以将此页码加载到分页组件中。使用此方法不需要您跟踪以前的页面。

可能有更好的方法可以做到这一点，但这只是一些建议:)

推荐阅读