订阅路线更改

Question

在React中，这个名为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-将ScrollStoreModule添加到您的应用模块

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

export class AppModule { 
...

那就是它。

id做什么：

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

随意contribute。

Answer 2

订阅路线更改

您可以订阅路由事件，当用户导航到新路由时，您可以将document.body.scrollTop设置为0.确保将其包含在将为任何请求的路由加载的根级别组件中。 / p>

组件

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

Angular 2中的浏览器样式滚动行为

2 个答案:

订阅路线更改

组件