子根的滚动位置恢复答案

【问题标题】：Scroll position restoration for child root子根的滚动位置恢复
【发布时间】：2020-02-10 23:50:37
【问题描述】：

我在返回特定滚动位置时遇到问题。在我的 ObjectListComponent 中有一个延迟加载对象的列表，一旦我单击对象名称，我就可以检查其详细信息。有一个返回按钮，它通向带有对象列表的上一页。问题是 ObjectListComponent 从一开始就被初始化，我无法回到之前的状态，即在我检查特定对象的详细信息之前的状态。我需要有我的可滚动对象列表，如果我输入 ObjectComponent 以检查其详细信息并想返回列表，我会在我的单个对象所在的同一位置登陆 ObjectList，所以我可以向下滚动并加载更多对象。

有一个选项 RouterModule.forRoot( 应用路线， { scrollPositionRestoration: 'disabled' } //

但我有 RouterModule.forChild，它不接受额外的选项作为参数。

【问题讨论】：

Idk 如果这有帮助，在我的情况下它也适用于子根 - stackoverflow.com/questions/57214772/…

标签： angular

【解决方案1】：

我有机会处理相同的要求，并且在任何前端框架中都没有支持滚动恢复的默认配置。我已经通过非常复杂的代码阅读了许多参考资料。我想自己开发并通过以下方式实现：

首先使用document.documentElement.scrollTop获取滚动位置，并映射到对象中的this.router.url（上一个url）。
返回同一页面后，与上述对象中的url进行比较，并为该页面应用相应的位置。
SPA 问题： 不同页面的异步加载需要不同的时间来呈现，因此会应用滚动位置效果。为了解决这个问题，我们可以使用setInterval或setTimeout来正确应用滚动位置。
在您的 home 组件中，订阅路由器事件并开始实现

这里：

scrollPos = {};
attempts = 5;
interval: any;
maxAttempts = 5;
scrollRestore() {
this.router.events.subscribe(event => {
if(event instanceof NavigationStart) {
this.scrollPos[this.router.url] = document.documentElement.scrollTop;
}
if(event instanceof NavigationEnd) {
this.scrollPos[event.url] ? 
this.applyScroll(this.scrollPos[event.url]):this.applyScroll(0)
}
});
}

applyScroll(pos) {
 this.interval = setInterval(() => {
  window.scrollTo(0, position);
  this.attempts++;
  this.clearScrollInterval(pos);
}, 30);
}

clearScrollInterval(pos) {
if (this.interval &&
  (this.attempts === this.maxAttempts || document.documentElement.scrollTop >= pos)) {
  clearInterval(this.interval);
  this.attempts= 0;
}
}

【讨论】：