Стиль прокрутки стиля браузера в Angular 2

Question

В React есть эта вещь, называемая call-router-scroll: https://www.npmjs.com/package/react-router-scroll. Это делает страницы приложения React прокрутки, как обычный сайт. Таким образом, он прокручивается вверху каждой новой страницы (маршрут) и сохраняет положение прокрутки прошлых страниц; когда вы нажимаете кнопку «Назад», помните, где вы прокручивались на этой странице.

Я ищу что-то подобное в Angular2. Я искал и не нашел ничего подобного. Должно быть где-то там.

Answer 1

Я создал модуль, который можно использовать, как это:

1-

npm install scrollstore 

2- Перейдите к app.module (где вы импортировать все ваши корневые модули).

import { ScrollStoreModule } from 'scrollStore'; 

3- Добавить ScrollStoreModule в ваш модуль приложения

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

export class AppModule { 
... 

Вот так.

Что делает идентификатор:

Сохраняет название маршрута, прежде чем изменить маршрут и, когда вы вернетесь, если что сохраненный маршрут существует в sessionStorage, он будет прокручиваться в таком положении, в противном случае он будет прокручивать в верхней части страницы ,

Не стесняйтесь contribute.

Answer 2

Подписка на маршрут изменения

Вы можете подписаться на маршрут событий, и, когда пользователь переходит на новый маршрут можно установить document.body.scrollTop 0. Убедитесь, чтобы включить его в качестве компонента на уровне корня, который будет загружен для любой запрошенный маршрут.

Компонент

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