Angular 角度路由器“；滚动位置恢复“；不能很好地使用路由器动画

我试图设计一个网站使用角8路由器动画。我已经导入了

BrowserAnimationsModule

，我确实看到动画在某种程度上起作用

我还使用Angular router的

scrollPositionRestoration

，以确保当用户单击链接查看新页面时，新页面的顶部会显示，而不是之前的滚动位置

但是，当路由器将新组件加载到视图中时，它会在应用路由器动画时将整个窗口突然滚动到最顶部。我尝试禁用了

scrollPositionRestoration

属性，这确实消除了恼人的滚动，但是我的新页面是在上一个滚动位置而不是顶部加载的

下面是一个证明我的问题的slackblitz:

---

要重新创建问题，请转到“关于”页面，向下滚动，然后单击“主页”链接，动画执行时会显示突然的滚动。

有几个问题需要解决：

• 上一个和下一个页面在动画期间都会保留在屏幕上，但高度可能不同

• 立即对下一页进行滚动恢复

• 从DOM中删除上一个页面时，窗口高度会突然改变（您会注意到滚动条高度突然缩小/增大）

不幸的是，我以前也经历过这种情况，解决方案包括禁用

scrollPositionRestoration

，监听

NavigationStart、NavigationEnd、popstate

，从“缓存”（页面和位置的

映射）手动应用滚动位置，并在动画开始时将
position:fixed
应用于上一个页面（在动画期间保持其位置，而不受下一个页面位置恢复的影响）

说实话不值得这么努力。我认为在加载页面时，最好在页面内容本身上应用
淡入
类型组件动画。您可以通过这种方式启用
滚动位置恢复
，而不必处理导航事件

在我看来，路由器动画只应在所有页面都是固定高度时使用
您需要提供问题中最小示例的代码。