在我的Angular 2应用中,当我向下滚动页面并单击页面底部的链接时,它确实会改变路由并将我带到下一页,但它不会滚动到页面顶部。因此,如果第一页很长,第二页内容很少,就会给人一种第二页缺乏内容的印象。因为只有当用户滚动到页面顶部时,内容才可见。

我可以滚动窗口到ngInit组件的页面顶部,但是,有没有更好的解决方案,可以自动处理我的应用程序中的所有路由?


当前回答

如果您使用服务器端呈现,则应该注意不要在服务器上使用窗口运行代码,因为服务器上不存在该变量。这将导致代码被破坏。

export class AppComponent implements OnInit {
  routerSubscription: Subscription;

  constructor(private router: Router,
              @Inject(PLATFORM_ID) private platformId: any) {}

  ngOnInit() {
    if (isPlatformBrowser(this.platformId)) {
      this.routerSubscription = this.router.events
        .filter(event => event instanceof NavigationEnd)
        .subscribe(event => {
          window.scrollTo(0, 0);
        });
    }
  }

  ngOnDestroy() {
    this.routerSubscription.unsubscribe();
  }
}

isPlatformBrowser是一个函数,用于检查当前应用程序所呈现的平台是否是浏览器。我们给它注入platformId。

它也可以检查变量窗口的存在,为了安全起见,像这样:

if (typeof window != 'undefined')

其他回答

Angular 6.1及更高版本:

Angular 6.1(发布于2018-07-25)通过一个名为“路由器滚动位置恢复”的特性,添加了内置支持来处理这个问题。正如Angular官方博客中所描述的,你只需要在路由器配置中启用它,如下所示:

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

此外,该博客称“预计这将成为未来主要版本的默认设置”。到目前为止,这种情况还没有发生(从Angular 11.0开始),但最终你将不需要在代码中做任何事情,它将会正确地开箱工作。

你可以在官方文档中看到更多关于这个特性以及如何定制这个行为的细节。

Angular 6.0及更早版本:

虽然@GuilhermeMeireles的出色回答解决了最初的问题,但它引入了一个新问题,打破了向后或向前导航(使用浏览器按钮或通过代码中的位置)时预期的正常行为。预期的行为是,当您导航回页面时,它应该保持向下滚动到与单击链接时相同的位置,但在到达每个页面时滚动到顶部显然打破了这一预期。

下面的代码扩展了检测这种导航的逻辑,方法是订阅Location的PopStateEvent序列,如果新到达的页面是这种事件的结果,则跳过滚动到顶部的逻辑。

如果你返回的页面足够长,足以覆盖整个视口,滚动位置将自动恢复,但正如@JordanNelson正确指出的那样,如果页面较短,你需要跟踪原始的y轴滚动位置,并在返回页面时显式地恢复它。代码的更新版本也涵盖了这种情况,总是显式地恢复滚动位置。

import { Component, OnInit } from '@angular/core';
import { Router, NavigationStart, NavigationEnd } from '@angular/router';
import { Location, PopStateEvent } from "@angular/common";

@Component({
    selector: 'my-app',
    template: '<ng-content></ng-content>',
})
export class MyAppComponent implements OnInit {

    private lastPoppedUrl: string;
    private yScrollStack: number[] = [];

    constructor(private router: Router, private location: Location) { }

    ngOnInit() {
        this.location.subscribe((ev:PopStateEvent) => {
            this.lastPoppedUrl = ev.url;
        });
        this.router.events.subscribe((ev:any) => {
            if (ev instanceof NavigationStart) {
                if (ev.url != this.lastPoppedUrl)
                    this.yScrollStack.push(window.scrollY);
            } else if (ev instanceof NavigationEnd) {
                if (ev.url == this.lastPoppedUrl) {
                    this.lastPoppedUrl = undefined;
                    window.scrollTo(0, this.yScrollStack.pop());
                } else
                    window.scrollTo(0, 0);
            }
        });
    }
}

下面在执行时调用它,它为我工作%100

  document.body.scrollTop = 0;

 this.brandCollectionList$.subscribe((response) => {
  document.body.scrollTop = 0;

});

Angular最近引入了一个新特性,在Angular的路由模块内部做了如下更改

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

这段代码背后的主要思想是将所有访问过的url和各自的scrollY数据保存在一个数组中。每当用户放弃一个页面(NavigationStart),这个数组就会被更新。每当用户进入一个新页面(NavigationEnd)时,我们决定是否恢复Y位置,这取决于我们如何到达这个页面。如果使用了某个页面上的引用,则滚动到0。如果使用浏览器后退/前进特性,则滚动到保存在数组中的Y。对不起,我的英语不好:)

import { Component, OnInit, OnDestroy } from '@angular/core';
import { Location, PopStateEvent } from '@angular/common';
import { Router, Route, RouterLink, NavigationStart, NavigationEnd, 
    RouterEvent } from '@angular/router';
import { Subscription } from 'rxjs/Subscription';

@Component({
  selector: 'my-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit, OnDestroy {

  private _subscription: Subscription;
  private _scrollHistory: { url: string, y: number }[] = [];
  private _useHistory = false;

  constructor(
    private _router: Router,
    private _location: Location) {
  }

  public ngOnInit() {

    this._subscription = this._router.events.subscribe((event: any) => 
    {
      if (event instanceof NavigationStart) {
        const currentUrl = (this._location.path() !== '') 
           this._location.path() : '/';
        const item = this._scrollHistory.find(x => x.url === currentUrl);
        if (item) {
          item.y = window.scrollY;
        } else {
          this._scrollHistory.push({ url: currentUrl, y: window.scrollY });
        }
        return;
      }
      if (event instanceof NavigationEnd) {
        if (this._useHistory) {
          this._useHistory = false;
          window.scrollTo(0, this._scrollHistory.find(x => x.url === 
          event.url).y);
        } else {
          window.scrollTo(0, 0);
        }
      }
    });

    this._subscription.add(this._location.subscribe((event: PopStateEvent) 
      => { this._useHistory = true;
    }));
  }

  public ngOnDestroy(): void {
    this._subscription.unsubscribe();
  }
}

对于iphone/ios safari,您可以使用setTimeout进行包装

setTimeout(function(){
    window.scrollTo(0, 1);
}, 0);