角型2のブラウザスタイルのスクロール動作

Question

リアクションにはreact-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-

アプリモジュールこれだけです

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

export class AppModule { 
... 

にScrollStoreModuleを追加します。

何ID：

はルートを変更する前に、ルート名を保存し、その保存されたルートがの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; 
     } 
    }); 
    } 
}