59
задан 16 July 2019 в 16:07

6 ответов

Угловые 6.1 и позже:

можно использовать созданный в решении , доступном в [1 110] Угловые 6.1 + с опцией scrollPositionRestoration: 'enabled' достигнуть того же.

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

Угловые 6.0 и ранее:

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

Примечание: ожидаемое поведение состоит в том, что, когда Вы перешли назад к странице, это должно остаться прокрученным вниз к тому же местоположению, которым это было, когда Вы нажали на ссылку, но прокрутку к вершине при прибытии в каждую страницу.

1
ответ дан 1 November 2019 в 11:03

попробуйте это

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

этот код, поддерживаемый угловой 6< =

1
ответ дан 1 November 2019 в 11:03

Компонент: Подпишитесь на все события маршрутизации вместо того, чтобы создать действие в шаблоне и прокрутите на NavigationEnd b/c иначе, Вы исчерпаете это на плохом navs или заблокированных маршрутах и т.д... Это - верный способ знать это, если к маршруту успешно перемещаются, то правдивая прокрутка. Иначе ничего не сделайте.

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

  router$: Subscription;

  constructor(private router: Router) {}

  ngOnInit() {
    this.router$ = this.router.events.subscribe(next => this.onRouteUpdated(next));
  }

  ngOnDestroy() {
    if (this.router$ != null) {
      this.router$.unsubscribe();
    }
  }

  private onRouteUpdated(event: any): void {
    if (event instanceof NavigationEnd) {
      this.smoothScrollTop();
    }
  }

  private smoothScrollTop(): void {
    const scrollToTop = window.setInterval(() => {
      const pos: number = window.pageYOffset;
      if (pos > 0) {
          window.scrollTo(0, pos - 20); // how far to scroll on each step
      } else {
          window.clearInterval(scrollToTop);
      }
    }, 16);
  }

}

HTML

<router-outlet></router-outlet>
1
ответ дан 1 November 2019 в 11:03

export class AppComponent {
  constructor(private router: Router) {
    router.events.subscribe((val) => {
      if (val instanceof NavigationEnd) {
        window.scrollTo(0, 0);
      }
    });
  }

}
2
ответ дан 1 November 2019 в 11:03

От Угловой Версии 6 + Никакая потребность использовать window.scroll (0,0)

Для Угловой версии 6+ от docs
опции Represents настроить маршрутизатор.

interface ExtraOptions {
  enableTracing?: boolean
  useHash?: boolean
  initialNavigation?: InitialNavigation
  errorHandler?: ErrorHandler
  preloadingStrategy?: any
  onSameUrlNavigation?: 'reload' | 'ignore'
  scrollPositionRestoration?: 'disabled' | 'enabled' | 'top'
  anchorScrolling?: 'disabled' | 'enabled'
  scrollOffset?: [number, number] | (() => [number, number])
  paramsInheritanceStrategy?: 'emptyOnly' | 'always'
  malformedUriErrorHandler?: (error: URIError, urlSerializer: UrlSerializer, url: string) => UrlTree
  urlUpdateStrategy?: 'deferred' | 'eager'
  relativeLinkResolution?: 'legacy' | 'corrected'
}

можно использовать scrollPositionRestoration?: 'disabled' | 'enabled' | 'top' в [1 114]

Пример:

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

И если Вы требуете для ручного управления прокруткой, Никакая потребность использовать window.scroll(0,0) Вместо этого от Углового общего пакета V6 не представила ViewPortScoller .

abstract class ViewportScroller {
  static ngInjectableDef: defineInjectable({ providedIn: 'root', factory: () => new BrowserViewportScroller(inject(DOCUMENT), window) })
  abstract setOffset(offset: [number, number] | (() => [number, number])): void
  abstract getScrollPosition(): [number, number]
  abstract scrollToPosition(position: [number, number]): void
  abstract scrollToAnchor(anchor: string): void
  abstract setHistoryScrollRestoration(scrollRestoration: 'auto' | 'manual'): void
}

Использование довольно Просто Пример:

import { Router } from '@angular/router';
import {  ViewportScroller } from '@angular/common'; //import
export class RouteService {

  private applicationInitialRoutes: Routes;
  constructor(
    private router: Router;
    private viewPortScroller: ViewportScroller//inject
  )
  {
   this.router.events.pipe(
            filter(event => event instanceof NavigationEnd))
            .subscribe(() => this.viewPortScroller.scrollToPosition([0, 0]));
}
3
ответ дан 1 November 2019 в 11:03

При направлении с этой проблемой в Угловых 6 можно зафиксировать ее путем добавления параметра scrollPositionRestoration: 'enabled' к RouterModule приложения-routing.module.ts:

@NgModule({
  imports: [RouterModule.forRoot(routes,{
    scrollPositionRestoration: 'enabled'
  })],
  exports: [RouterModule]
})
37
ответ дан 1 November 2019 в 11:03

Другие вопросы по тегам:

Похожие вопросы: