Question

当用户按下浏览器后退按钮时，我有一些问题无法获得正确的滚动位置。当前，需要加载的异步数据需要很长时间，因此滚动仅在数据完成之前是局部的。

如果我对容器div使用固定高度，则滚动恢复将按预期工作。

关于如何解决此问题的任何想法？

以下是我的路线中滚动恢复失败的相关部分。方法processProdTypQuery检查路由器参数，仅在需要时才向articleOutput$发出新数据。 articlesView用作模板中哑元的输入。

articles-route.component.ts

export class ArticlesRouteComponent implements OnInit {

  articlesView: Article[];

  constructor(
    private route: ActivatedRoute,

    // Service that collects article data from API
    private article: articleService,

    // Service that takes an article list as input, filters it and outputs a new list
    private articleFilter: ArticleFilterService) {

    this.articleFilter.articleOutput$.subscribe(output => {
      this.articlesView = output;
    });
  }

  ngOnInit() {
    this.route.queryParams.subscribe(params => {
      this.articleFilter.processProdTypQuery(params);
      this.article.processProdTypQuery(params);
    });
  }
}

在路由器模块中启用了滚动恢复，如下所示，

@NgModule({
  imports: [ RouterModule.forRoot(routes, {
    scrollPositionRestoration: 'enabled',
    anchorScrolling: 'enabled'
    })
  ],
  exports: [ RouterModule ]
})

Answer 1

我将添加自己的解决方案，尽管这可能不是最佳答案。希望它仍然可以帮助其他人。

我没有试图找出滚动恢复的角度处理方式，而是将Y滚动位置保存在ngOnDestroy上的文章列表服务中

export class ArticlesRouteComponent implements OnInit, OnDestroy {

  articlesView: Article[];

  constructor(
    private route: ActivatedRoute,

    // Service that collects article data from API
    private article: articleService,

    // Service that takes an article list as input, filters it and outputs a new list
    private articleFilter: ArticleFilterService) {

    this.articleFilter.articleOutput$.subscribe(output => {
      this.articlesView = output;

      this.articleFilter.restoreScrollPosition();
    });
  }

  ngOnInit() {
    this.route.queryParams.subscribe(params => {
      this.articleFilter.processProdTypQuery(params);
      this.article.processProdTypQuery(params);
    });
  }
  
  ngOnDestroy() {
    this.articleFilter.scrollPosition = window.scrollY;
  }
}

this.articleFilter.restoreScrollPosition() 滚动恢复方法可能应该在其他地方运行，因为它需要超时才能正常工作。

restoreScrollPosition() {
    window.setTimeout(() => {
      window.scrollTo({behavior: 'smooth',top:this.scrollPosition, left:0});
    }, 200);
  }

后退按钮上的Angular 10滚动位置

1 个答案: