Ich verwende Angular 5. Ich habe ein Dashboard mit wenigen Abschnitten mit kleinem Inhalt und wenigen Abschnitten mit so großem Inhalt, dass ich beim Wechseln des Routers nach oben auf ein Problem stoße. Jedes Mal muss ich scrollen, um nach oben zu gelangen.

Wie kann ich dieses Problem lösen, damit beim Wechseln des Routers meine Ansicht immer oben bleibt?

Es gibt einige Lösungen, überprüfen Sie sie alle 🙂

Die Router-Steckdose gibt die activate Ereignis jedes Mal, wenn eine neue Komponente instanziiert wird, also könnten wir verwenden (activate) um (zum Beispiel) nach oben zu scrollen:

app.component.html

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

app.komponente.ts

onActivate(event) {
    window.scroll(0,0);
    //or document.body.scrollTop = 0;
    //or document.querySelector('body').scrollTo(0,0)
    ...
}

Verwenden Sie zum Beispiel diese Lösung für ein reibungsloses Scrollen:

    onActivate(event) {
        let scrollToTop = window.setInterval(() => {
            let pos = window.pageYOffset;
            if (pos > 0) {
                window.scrollTo(0, pos - 20); // how far to scroll on each step
            } else {
                window.clearInterval(scrollToTop);
            }
        }, 16);
    }

Wenn Sie selektiv sein möchten, sagen wir, dass nicht jede Komponente das Scrollen auslösen soll, können Sie dies in einem überprüfen if Aussage wie diese:

onActivate(e) {
    if (e.constructor.name)==="login"{ // for example
            window.scroll(0,0);
    }
}

Seit Angular6.1 können wir auch { scrollPositionRestoration: 'enabled' } auf eifrig geladenen Modulen und wird auf alle Routen angewendet:

RouterModule.forRoot(appRoutes, { scrollPositionRestoration: 'enabled' })

Es wird auch bereits das reibungslose Scrollen übernehmen. Dies hat jedoch den Nachteil, dies bei jedem Routing zu tun.

Eine andere Lösung besteht darin, die Router-Animation nach oben zu scrollen. Fügen Sie dies in jedem Übergang hinzu, bei dem Sie nach oben scrollen möchten:

query(':enter, :leave', style({ position: 'fixed' }), { optional: true }) 

Wenn dieses Problem in Angular 6 auftritt, können Sie es beheben, indem Sie den Parameter hinzufügen scrollPositionRestoration: 'enabled' zum RouterModule von app-routing.module.ts:

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

BEARBEITEN: Für Angular 6+ verwenden Sie bitte die Antwort von Nimesh Nishara Indimagedara mit der Erwähnung:

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

Ursprüngliche Antwort:

Wenn alles fehlschlägt, erstellen Sie oben ein leeres HTML-Element (zB: div) (oder scrollen Sie zum gewünschten Ort) mit id=”top” auf der Vorlage (oder der übergeordneten Vorlage):

<div id="top"></div>

Und im Bestandteil:

  ngAfterViewInit() {
    // Hack: Scrolls to top of Page after page view initialized
    let top = document.getElementById('top');
    if (top !== null) {
      top.scrollIntoView();
      top = null;
    }
  }

Jetzt gibt es eine integrierte Lösung in Angular 6.1 mit scrollPositionRestoration Möglichkeit.

Siehe meine Antwort auf Angular 2 Bei Routenänderung nach oben scrollen.

Ab Angular Version 6+ Keine Notwendigkeit, window.scroll(0,0) zu verwenden

Für Winkelversion 6+ von @docs

Stellt Optionen zum Konfigurieren des Routers dar.

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'
}

Kann man gebrauchen scrollPositionRestoration?: 'disabled' | 'enabled' | 'top' in

Beispiel:

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

Und wenn man das Scrollen manuell steuern muss, braucht man es nicht zu verwenden window.scroll(0,0)
Stattdessen wurde von Angular V6 ein gemeinsames Paket eingeführt 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
}

Die Verwendung ist ziemlich einfach
Beispiel:

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

Obwohl @Vega die direkte Antwort auf Ihre Frage bietet, gibt es Probleme. Es bricht die Zurück/Vorwärts-Schaltfläche des Browsers. Wenn Ihr Benutzer auf die Zurück- oder Vorwärts-Schaltfläche des Browsers klickt, verliert er seinen Platz und wird ganz nach oben gescrollt. Dies kann für Ihre Benutzer ein wenig mühsam sein, wenn sie weit nach unten scrollen müssen, um zu einem Link zu gelangen, und sich entscheiden, zurück zu klicken, nur um festzustellen, dass die Bildlaufleiste nach oben zurückgesetzt wurde.

Hier ist meine Lösung für das Problem.

export class AppComponent implements OnInit {
  isPopState = false;

  constructor(private router: Router, private locStrat: LocationStrategy) { }

  ngOnInit(): void {
    this.locStrat.onPopState(() => {
      this.isPopState = true;
    });

    this.router.events.subscribe(event => {
      // Scroll to top if accessing a page, not via browser history stack
      if (event instanceof NavigationEnd && !this.isPopState) {
        window.scrollTo(0, 0);
        this.isPopState = false;
      }

      // Ensures that isPopState is reset
      if (event instanceof NavigationEnd) {
        this.isPopState = false;
      }
    });
  }
}

In meinem Fall habe ich gerade hinzugefügt

window.scroll(0,0);

in ngOnInit() und es funktioniert gut.