在路线更改和新组件加载不起作用后以角度滚动到顶部

Posted 2023-02-22

【中文标题】在路线更改和新组件加载不起作用后以角度滚动到顶部

【英文标题】：Scrolling to top in angular after route change and new component loads not working

【发布时间】：2019-08-25 23:56:38

【问题描述】：

我正在构建一个基本的 Angular 应用程序，我有一些组件，当我从主页转到服务页面时，向下滚动，然后返回主页，滚动设置为页面底部。

我想在每次打开组件时将滚动条设置为顶部。

由于我使用的是 angular7，我尝试使用路由器中可用的选项，

scrollPositionRestoration : 'enabled'

然后

scrollPositionRestoration : 'top',

但它不适用于 Chrome、Chrome 移动设备或 Edge。

除此之外，我尝试在路由器上设置监听器并使用 window.scrollTop(0,0)，这也不起作用，使用文档变量也不起作用。

我只想让滚动条在顶部。这是一件很幼稚的事情，但现在让我很沮丧。

【问题讨论】：

查看***.com/questions/39601026/…

那行不通。我之前检查过它，据说它使用了路由器中可用的新选项。

可能滚动不会发生在window 上，而是发生在其他一些元素上。您必须弄清楚您的案例中的可滚动容器是什么。例如我使用MatSidenav 滚动发生在mat-sidenav-content 上，并使用document.getElementsByTagName('mat-sidenav-content')[0].scrollTo(0, 0) 滚动到路由器事件的顶部。

【参考方案1】：

scrollPositionRestoration 也不适合我。我通过不使用带有“scrollPositionRestoration：'enabled'”的Angular Material的“mat-drawer”组件来解决它。不幸的是，“mat-drawer-content”的滚动位置无法恢复到之前的滚动状态。如果您没有使用 Angular Material，则可能是另一个组件的问题。

如果你想用“mat-drawer”滚动到顶部，那么使用这个：

// Navigate to the given route
public navigate (route: string): void 
    this.router.navigateByUrl(route)
    document.getElementsByTagName('mat-drawer-content')[0].scrollTo(0, 0)

【参考方案2】：

感谢弗里多。 在我的情况下，我必须将滚动应用于“mat-drawer-content”。像魅力一样工作。

由 fridoo 回答。

Maybe scrolling doesn't happen on the window but on some other element. You have to figure out what the scrollable container in your case is. e.g. I use a MatSidenav where scrolling happens on the mat-sidenav-content and use document.getElementsByTagName('mat-sidenav-content')[0].scrollTo(0, 0) to scroll to the top on router events.

【讨论】：

如何找出导致此行为的组件？

【参考方案3】：

由于 MatSideNavContent 扩展了扩展 CdkScrollable 的 MatDrawerContent，您可以在组件中这样获取它：

@ViewChild('sidenavContent', read: MatSidenavContent) sidenavContentScrollable: MatSidenavContent;

在需要时，您可以通过 CdkScrollable API 设置滚动位置，例如：

if (this.sidenavContentScrollable) 
   this.sidenavContentScrollable.scrollTo(top: 0);

【参考方案4】：

在我的情况下，window.scrollTo(0, 0) 技巧不起作用，因为我实际上需要滚动到溢出的路由器插座的顶部。如果您有类似的问题，这是我作为解决方法所做的：

@Component(
    template: '<router-outlet (activate)="onActivate($event, outlet)" #outlet></router-outlet>',
)
export class MyParentComponent 
    onActivate(e, outlet) 
        outlet.scrollTop = 0;