更改查询参数 - 页面滚动到顶部，Angular

Question

我正在使用此代码使我的应用程序在更改路线时滚动到顶部，一切正常，但我想在更改查询参数时禁用此选项。我有 angular material 个选项卡，我的查询参数定义了访问页面时应打开哪个选项卡，但是当我更改选项卡（也更改 url）时，它会自动滚动到顶部

我认为不可能简单地做到这一点，但也许你有答案

  imports: [RouterModule.forRoot(routes, {
    scrollPositionRestoration: 'enabled',
    anchorScrolling: 'enabled'
  })]

我希望仅更改选项卡时应用程序不会滚动到顶部

Answer 1

查看属性 scrollPositionRestoration 文档，发现：

You can implement custom scroll restoration behavior by adapting the enabled behavior...

实施：

删除添加的代码：

{
  scrollPositionRestoration: 'enabled',
  anchorScrolling: 'enabled'
}

保留为：

imports: [RouterModule.forRoot(routes)]

将以下代码添加到 app.module.ts:

import { Event, Scroll, Router } from '@angular/router';
import { ViewportScroller } from '@angular/common';

export class AppModule {
  constructor(router: Router, viewportScroller: ViewportScroller) {
    router.events.pipe(
      filter((e: Event): e is Scroll => e instanceof Scroll)
    ).subscribe(e => {
      // here you'll have your own logic, this is just an example.
      if (!router.url.includes('hello')) {
        viewportScroller.scrollToPosition([0, 0]);
      }
    });

  }
}

这里有一个 DEMO 用于重现您的问题。

这是一个 DEMO 使用此解决方案解决它的问题。

干杯

Answer 2

最后我找到了在查询参数更改时不滚动的工作解决方案 here

将成对管道运算符与过滤器一起使用效果非常好，它可以让您将匹配过滤器的最后一个发射值与当前值进行比较。

我自己的完整工作片段：

export class AppModule {
  constructor( private router: Router, private viewportScroller: ViewportScroller ) {
    this.router.events.pipe(
      filter( ( e: Event ): e is Scroll => e instanceof Scroll ),
      pairwise()
    ).subscribe( ( eventPair ) => {
      const previousEvent = eventPair[ 0 ];
      const event = eventPair[ 1 ];
      if ( event.position ) {
        // backward navigation
        this.viewportScroller.scrollToPosition( event.position );
      } else if ( event.anchor ) {
        // anchor navigation
        this.viewportScroller.scrollToAnchor( event.anchor );
      } else {
        // forward navigation
        if ( (previousEvent.routerEvent.urlAfterRedirects.split( '?' )[ 0 ]) !== event.routerEvent.urlAfterRedirects.split( '?' )[ 0 ] ) {
          // Routes don't match, this is actual forward navigation
          // Default behavior: scroll to top
          this.viewportScroller.scrollToPosition( [0, 0] );
        }
      }
    } );
  }
}

更改查询参数 - 页面滚动到顶部，Angular

Changing query params - page scrolls top, Angular

parameters

tabs

router

angular