Угловой 6, прокрутить вверх

Question

Я столкнулся с проблемой в моем угловом 6 приложении.Когда маршрут добавлен, свиток не меняет свою позицию.Я хочу, чтобы он прокручивался до верхней части страницы при добавлении маршрута.http://localhost:4200/#/pending-transfer - начальный маршрут.После того, как пользователь нажимает кнопку на странице, маршрут добавляется к http://localhost:4200/#/pending-transfer/2595/62.Я пытался использовать window.scrollTo(0,0) в ngOnInit(), но это не сработало.

Answer 1

Если вы используете Angular v6 или более, вы можете просто установить эту опцию в дополнительных опциях конфигурации маршрутизации, как показано ниже -

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

Это всегда будет устанавливать ваше положение прокрутки вверх во время навигации.

Подробнее см. Здесь -

• Глубокое погружение в угловую маршрутизацию - Прокрутка вверх, Отладка и многое другое

Answer 2

Некоторое время назад я столкнулся с подобной проблемой, и это сработало для Angular 4. Надеюсь, вы тоже сможете ее использовать.Это в app.component.ts :

export class AppComponent {
  constructor(private router: Router, private route: ActivatedRoute, private location: Location) { }

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

  ngOnInit() {
    const path = this.route.snapshot.queryParams['path'];
    const navigateTo = '/' + path;

    if (path) {
      this.router.navigate([navigateTo]);
    }

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

  }
}