Question

我加载了一些员工结果，并且正在使用每页20个分页结果。当我滚动浏览第一页的最后一页时，我将其单击，并将用户重定向到另一页，当用户单击“后退”按钮时，他们将返回搜索结果，但滚动位置已丢失。关于如何维护它的任何建议？

Answer 1

Angular在导入路由器模块时可以应用一些其他选项，这些选项可能会满足您的要求。

https://angular.io/api/router/ExtraOptions#scrollPositionRestoration

他们有一个组件特定滚动示例。我从未亲自尝试过，但似乎与您要达到的目标相符。

Answer 2

将其添加到您的app.component.ts文件中就可以了，如Wingnod所说的。

export class AppComponent {
  constructor(router: Router, viewportScroller: ViewportScroller) {
    router.events.pipe(
      filter((e: Event): e is Scroll => e instanceof Scroll)
    ).subscribe(e => {
      if (e.position) {
        // backward navigation
        viewportScroller.scrollToPosition(e.position);
      } else if (e.anchor) {
        // anchor navigation
        viewportScroller.scrollToAnchor(e.anchor);
      } else {
        // forward navigation
        viewportScroller.scrollToPosition([0, 0]);
      }
    });
  }
}

此行为的原因是页面尚未呈现，scrollToPosition无效。没有超时的好办法，但是它可以工作。 DrDager

注意

Angular实际上对此问题有open issue

返回时保持滚动位置并更改角度5

2 个答案:

注意