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

Question

我正在实现一个只有两个用户界面的小项目。

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

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

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

让我们假设以下场景

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

<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 时，获取您所在的页面并将其加载回分页组件。另一种方法是使用路由器参数。通过稍微修改您的网址，它们可以采用以下形式：/home/1/home/2/home/3点击第2页中的用户可以给出url：（/home/2/user-id只是一个例子）您的主页组件的路径可能如下所示：const routes: Routes = [&nbsp; { path: "home/:pageNumber", component: HomeComponent }];加载 home 组件后，您可以获取 router 参数，如下所示（我使用的是 Router 方法，但您也可以手动解析 URL）：export class HomeComponent implements OnInit {&nbsp; constructor(private router: Router) {&nbsp; &nbsp; const pageNumber = this.router.navigationExtras.params['pageNumber'];&nbsp; }}然后，您可以将此页码加载到分页组件中。使用此方法不需要您跟踪以前的页面。可能有更好的方法可以做到这一点，但这只是一些建议:)