web-dev-qa-db-ja.com

Angular 2は、ルート変更が機能していないときに上にスクロールします

ルートが変更されたときにangular 2サイトでページの一番上までスクロールしようとしています。 、ページは最初のページの位置までスクロールされます。

import { Component, OnInit } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';

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

    ngOnInit() {
        this.router.events.subscribe((evt) => {
            if (!(evt instanceof NavigationEnd)) {
                return;
            }
            window.scrollTo(0, 0)
        });
    }
}

私は何を間違えていますか？

javascriptjqueryangular
18
user979331

新しいコンポーネントが_<router-outlet>_にロードされると、ルーターはイベントを発行するため、イベントをアタッチできます。

コンポーネントで_<router-outlet>_を使用する場合：

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

次に、_<router-outlet>_を配置した同じコンポーネントに、次のメソッドを追加します。

_scrollTop(event) {
  window.scroll(0,0);
}
_
13
Mac_W

この似たような問題に直面したのは、体に適用されるスタイルが原因でした。つまり.

body {
    height: 100%;
    overflow-x: hidden;
}

このスタイルを削除すると、レイアウトに大きな影響が出ました。

スタイルを削除する代わりに、以下の解決策を試してみましたが、うまくいきました...

解決：

export class AppComponent implements OnInit {


  constructor(private router: Router, private changeDetect: ChangeDetectorRef) {
  }

  ngOnInit() {
    this.router.events.subscribe((evt) => {
      if (!(evt instanceof NavigationEnd)) {
        return;
      }
      // Change height:100% into auto
      $('body').css('height', 'auto');
      // Successfully scroll back to top
      $('body').scrollTop(0);
      // Remove javascript added styles
      $('body').css('height', '');
      this.changeDetect.detectChanges();
    });

  }
}
2
khush
  constructor(
    private router: Router,
    private ngZone: NgZone) {
    router.events.subscribe((event: RouterEvent) => {
      this._navigationInterceptor(event);
    });
  }

  private _navigationInterceptor(event: RouterEvent): void {
    if (event instanceof NavigationStart) {
    }
    if (event instanceof NavigationEnd) {
    window.scrollTo({
     top: 0
    });
  // or,  window.scroll(0,0);
    }
  }
2
Mahi

コンポーネントが初期化されるのを待ってから、スクロールを開始してください。したがって、このコードをngAfterViewInit関数の下に置く方が適切です。

 ngAfterViewInit() {
        this.router.events.subscribe((evt) => {
            if (!(evt instanceof NavigationEnd)) {
                return;
            }
            window.scrollTo(0, 0)
        });
    }
2
Sunil Singh

このソリューションは私のプロジェクトで完璧に機能します：

export class AppComponent  {
  constructor (
    private _router: Router,
  ) {
    this._subscribeRouteEvents();
  }

  private _subscribeRouteEvents (): void {
    this._router.events.subscribe(e => {
      if (!(e instanceof NavigationEnd)) return;
      window.scrollTo(0, 0);
    });
  }
}
2
Eugene Mihaylin