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

Question

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

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

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

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

Answer 1

查看属性scrollPositionRestoration文档，发现了这个：

您可以通过调整启用的行为来实现自定义滚动恢复行为...

执行：

1. 删除添加的代码：

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

将其保留为：

imports: [RouterModule.forRoot(routes)]

2. 将以下代码添加到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]);
      }
    });

  }
}

这是用于重现您的问题的演示。

这是一个用这个解决方案解决它的演示。

干杯