typescript - Angular 7.x.x 滚动到片段的最简单方法？

Question

在过去的两天里，我一直在 internetz 上挖掘有关使用 angular 将片段滚动到 View 中的信息。

假设我们有一个静态网页，其中包含一堆充当片段的 id-s。并有一个侧边导航栏，用于通过链接浏览片段。

我试过 Router anchorScroll 简单地添加 this该模块对我没有任何作用。它只为您提供 URL 中的片段，但没有滚动。

我试过 viewportScroller。这样做的主要问题是它不是第一次工作(例如:你被重定向到这个带有所需片段的静态页面，但是滚动没有发生，如果你一直在同一个页面上并重复这个过程，如果您单击与您访问的网址相同的侧面导航栏上的链接，它会起作用: ([foo]/[bar]#[fragment]) 它也不起作用，因为没有导航发生变化。

用于路由器的额外选项:

const routerOptions: ExtraOptions = {
  useHash: false,
  anchorScrolling: 'enabled',
  scrollPositionRestoration: 'enabled',
  onSameUrlNavigation: 'reload'
};

ps.: useHash: true 不会改变任何东西。

ngOnInit 中的 viewportScroller:

this.viewportScroller.setOffset([0, 64]);
this.viewportScroller.setHistoryScrollRestoration('auto');

this.router.events.pipe(filter(element => element instanceof Scroll)).subscribe((element: any) => {
  console.log(element)
  this.viewportScroller.scrollToAnchor(element.anchor);
});

滚动到片段的最简单方法是什么!!!使用这个:

ngOnInit() {
  this.route.fragment.subscribe((fragment: string) => { 
    if (fragment && document.getElementById(fragment) != null) {
      document.getElementById(fragment).scrollIntoView({ behavior: "smooth" });
    }
  });
}

b/c 它每次都有效，但它不是 TS，因为我们在公司的项目中使用 TS。

请帮帮我

Answer 1

我遇到了同样的问题。看看这个 solution by Ben Nadel .该解决方案适用于 Angular 7.X。您可以配置 RouterModule 来处理 anchor 滚动，甚至可以在带有片段的 anchor 上多次单击。这是您需要的代码:

 @NgModule({
  imports: [RouterModule.forRoot(routes,
            {
              anchorScrolling: 'enabled',
              onSameUrlNavigation: 'reload',
              scrollPositionRestoration: 'enabled'
            })],
  exports: [RouterModule]
})
export class AppRoutingModule { }

希望这对您有所帮助。