Question

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

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

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

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

的应用程序组件

让我们假设以下情况

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

<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），那么希望分页组件接受当前页面的输入。然后，您需要通过服务或持久性存储来跟踪该页面。每当您路由回到Home UI时，请获取您所在的页面并将其加载回分页组件中。

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

.class1 div { color: red; } .class1 h2 { color: blue; } .class1 p { color: yellow; }
/home/1
/home/2

单击第2页中的用户可以提供网址：/home/3（仅作为示例）

home组件的路径如下所示：

/home/2/user-id

在加载home组件时，您可以按以下方式获取get router参数（我使用的是Router方法，但是您也可以手动解析URL）：

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

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

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

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

1 个答案: