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

Question

我正在实现一个只有两个用户界面的小项目。1-第一个 UI 称为“主页”，其中包含分页的用户列表the home component。2-第二个 UI 称为用户详细信息，其中包含用户个人资料the user-details component3-当然还有包含工具栏的应用程序组件和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 = [

  { 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'];

  }

}

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

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