angular - window.scroll 不适用于 Angular 11 和 Material

Question

您好，我在“Angular 11”中有这段代码:

应用程序组件.html:

<div class="app-container">

    <mat-toolbar >
  
    </mat-toolbar>
  
    <mat-sidenav-container >
      <mat-sidenav role="navigation">
        <mat-nav-list>
          <!-- <a mat-list-item routerLink="." *ngFor="let nav of fillerNav">{{ nav }}</a> -->
    
      </mat-sidenav>
      <mat-sidenav-content role="main">
  
        <router-outlet></router-outlet>
  
      </mat-sidenav-content>
    </mat-sidenav-container>
  </div>

而且我希望在从页面导航到其他页面时将页面滚动到顶部。我已经尝试了很多。

第一个解决方案:

RouterModule.forRoot(appRoutes, { scrollPositionRestoration: 'enabled' })

第二种解决方案:在 app.component.html

<router-outlet (activate)="onActivate($event)" ></router-outlet>

然后在 app.component.ts 中

onActivate(event) {
    window.scroll(0,0);
    //or document.body.scrollTop = 0;
    //or document.querySelector('body').scrollTo(0,0)
    ...
}

没有任何效果，我该怎么做？有帮助吗？

Answer 1

您需要滚动mat-sidenav-content。使用此组件时，窗口本身已位于 0，因为该组件使用带有溢出的完整视口(viewport)高度，使其看起来像页面正在滚动。有一个现有的 github issue要求为此提供功能。

您可以将它放在您的应用程序组件中以解决问题:

ngOnInit() {
  this.router.events
    // For newer versions or rxjs use a pipe on the filter:
    // .pipe(filter(event => event instanceof NavigationEnd))
    .filter(event => event instanceof NavigationEnd)
    .subscribe(() => {
      document.querySelector('.mat-sidenav-content').scrollTop = 0;
    });
}