3

在 React 中有一个叫做 react-router-scroll 的东西：https ://www.npmjs.com/package/react-router-scroll 。它使 React 应用程序页面像普通站点一样滚动。所以它滚动到每个新页面（路线）的顶部，并保留过去页面的滚动位置；当您单击后退按钮时，它会记住您在该页面上滚动到的位置。

我正在Angular2中寻找类似的东西。我搜索并没有找到类似的东西。应该在外面的某个地方。

4

2 回答 2

3

我创建了一个模块，您可以像这样使用它：

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 { 
...

而已。

id 做什么：

在更改路线之前保存路线名称，当您返回时，如果保存的路线存在于 sessionStorage 中，它将滚动到该位置，否则它将滚动到页面顶部。

随意贡献。

于 2016-12-28T01:56:46.233 回答
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;
      }
    });
  }
}
于 2016-12-27T21:33:46.333 回答