Comportements de défilement du style de navigateur dans Angular 2

Question

Dans Réagir, il y a cette chose appelée réac-router-scroll: https://www.npmjs.com/package/react-router-scroll. Il fait défiler les pages de l'application comme un site normal. Donc, il défile vers le haut de chaque nouvelle page (route), et conserve la position de défilement des pages précédentes; lorsque vous cliquez sur le bouton de retour, il se souvient où vous avez fait défiler sur cette page.

Je cherche quelque chose comme ça dans Angular2. J'ai cherché et n'ai rien trouvé de pareil. Devrait être là quelque part.

Answer 1

J'ai créé un module que vous pouvez utiliser comme ceci:

1-

npm install scrollstore 

2- Allez à votre app.module (où vous importez tous vos modules racine).

import { ScrollStoreModule } from 'scrollStore'; 

3- Ajouter ScrollStoreModule à votre module app

@NgModule({ 
    bootstrap: [ AppComponent ], 
    imports: [ 
    ScrollStoreModule, // put it here 
    BrowserModule, 
    FormsModule, 
    HttpModule 
    .. rest of your modules .... 
    ] 
}) 

export class AppModule { 
... 

Voilà.

Que id? Elle

Enregistre le nom de l'itinéraire avant de changer l'itinéraire et quand vous revenez si cette route enregistrée existe dans sessionStorage, il défilera à cette position, sinon il va défiler en haut de la page .

N'hésitez pas à contribute.

Answer 2

Abonnez-vous à la route change

Vous pouvez vous abonner à des événements d'itinéraire, et lorsque l'utilisateur accède à une nouvelle route, vous pouvez définir document.body.scrollTop à 0. Assurez-vous d'inclure dans un composant de niveau racine qui sera chargée pour toute route demandée.

Component

import { Component, OnInit } from '@angular/core'; 
import { NavigationEnd, Router } from '@angular/router'; 

@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.scss'] 
}) 
export class AppComponent implements OnInit { 
    constructor(private router: Router) { } 
    ngOnInit() { 
    this.router.events.subscribe(event => { 
     if (event instanceof NavigationEnd) { 
     document.body.scrollTop = 0; 
     } 
    }); 
    } 
}