javascript - script - 経路の変更で Angular2 が上にスクロールしない




jquery title text (4)

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

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のサイトで私のページの上にスクロールしようとしていますが、私は次のことを試しましたが、何も起こらず、あるページから別のページへのルートを変更すると、ページは最初のページ:

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)
        });
    }
}

私は間違って何をしていますか?


この似たような問題は、身体に適用されたスタイルに起因する私に直面していました。 すなわち、

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();
    });

  }
}

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

したがって、 <router-outlet>使用するコンポーネントでは次のようになります。

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

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

scrollTop(event) {
  window.scroll(0,0);
}

  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);
    }
  }






angular