Angulaire 5 faire Défiler vers le haut sur chaque Itinéraire, cliquez

si tout échoue, alors créer un élément HTML vide (par exemple: div) en haut (ou défiler vers l'emplacement désiré) avec id= "top" sur le modèle (ou le modèle parent):

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

et dans le composant:

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

bien que @Vega fournisse la réponse directe à votre question, il y a des problèmes. Il casse le bouton back/forward du navigateur. Si vous êtes l'utilisateur clique sur le bouton de retour ou vers l'avant du navigateur, ils perdent leur place et obtient scrolled chemin au sommet. Cela peut être un peu une douleur pour vos utilisateurs s'ils ont dû faire défiler le chemin vers le bas pour obtenir un lien et ont décidé de cliquer en arrière seulement pour trouver le scrollbar avait été réinitialisé au sommet.

Voici ma solution au problème.

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

maintenant il y a une solution intégrée disponible en angle 6.1 avec l'option scrollPositionRestoration .

Voir ma réponse sur Angulaire 2 faire Défiler vers le haut sur la Route du Changement .

Voici une solution qui ne défile au-dessus du composant qu'en cas de première visite pour chaque composant (au cas où vous auriez besoin de faire quelque chose de différent par composant):

dans chaque composant:

export class MyComponent implements OnInit {

firstLoad: boolean = true;

...

ngOnInit() {

  if(this.firstLoad) {
    window.scroll(0,0);
    this.firstLoad = false;
  }
  ...
}

je continue à chercher une solution intégrée à ce problème comme il y a à AngularJS. Mais d'ici là, cette solution fonctionne pour moi, c'est simple, et préserve la fonctionnalité de bouton arrière.

app.composant.html

<router-outlet (deactivate)="onDeactivate()"></router-outlet>

app.composant.ts

onDeactivate() {
  document.body.scrollTop = 0;
  // Alternatively, you can scroll to top by using this other call:
  // window.scrollTo(0, 0)
}

Réponse zurfyx post original

dans mon cas je viens d'ajouter

window.scroll(0,0);

dans ngOnInit() et son amende de travail.

vous avez juste besoin de créer une fonction qui contient le réglage du défilement de votre écran

par exemple

window.scroll(0,0) OR window.scrollTo() by passing appropriate parameter.

de la fenêtre.scrollTo (xpos, ypos) --> paramètre attendu.

essayez ceci:

app.composant.ts

import {Component, OnInit, OnDestroy} from '@angular/core';
import {Router, NavigationEnd} from '@angular/router';
import {filter} from 'rxjs/operators';
import {Subscription} from 'rxjs';

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

    constructor(private router: Router) {
    }

    ngOnInit() {
        this.subscription = this.router.events.pipe(
            filter(event => event instanceof NavigationEnd)
        ).subscribe(() => window.scrollTo(0, 0));
    }

    ngOnDestroy() {
        this.subscription.unsubscribe();
    }
}