如何在 angular 9 中实现后退按钮

Question

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

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

2-第二个 UI 称为用户详细信息，其中包含用户个人资料 the user-details component

3- 当然还有包含工具栏和 router-outlet

的应用程序组件

让我们假设以下场景

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

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

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

Answer 1

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

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

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

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

点击页面 2 中的用户可以得到 url: /home/2/user-id（仅举个例子）

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

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

加载home组件后，你可以获取router参数如下（我用的是Router方法，你也可以手动解析URL）：

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

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

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

如何在 angular 9 中实现后退按钮

How to implement back button in angular 9

html

angular

typescript

angular9