Угловая 2 прокрутка вверх при изменении маршрута не работает

Я пытаюсь прокрутить верхнюю часть моей страницы на своем угловом 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)
        });
    }
}

Что я делаю неправильно?

Ответы

Ответ 1

Маршрутизатор выдаст событие, когда новый компонент будет загружен в <router-outlet> чтобы вы могли прикрепить к нему событие.

Итак, в вашем компоненте с <router-outlet> используйте:

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

и затем в том же компоненте, где вы разместили <router-outlet> добавьте следующий метод:

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

Ответ 2

Подождите, пока компонент инициализируется, прежде чем начать прокрутку. Поэтому лучше поместить этот код в функцию ngAfterViewInit.

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

Ответ 3

С подобной проблемой я столкнулся из-за стиля, применяемого к телу. т.е.

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

  }
}

Ответ 4

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

Ответ 5

Это решение отлично работает в моем проекте:

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