Angular 7.xx滚动到片段的最简单方法？

Question

在过去的两天中，我一直在Internetz上挖掘有关将片段滚动到具有角度的视图中的信息。

假设我们有一个静态网页，其中包含一堆充当片段的ID。并具有一个侧面导航栏，可通过链接浏览片段。

我试过路由器anchorScroll只需添加这对模块无所事事的我。它只是为您提供URL中的片段，但没有滚动。

我已经尝试过viewportScroller。这样做的主要问题是它第一次无法使用（例如：如果您一直在同一页面上并重复该过程，则将您重定向到具有所需片段的静态页面，但滚动不会发生） ，如果您单击导航栏旁边具有与您访问的URL相同的URL的链接，则它起作用： ([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

我有同样的问题。看看Ben Nadel的解决方案。该解决方案适用于Angular7.X。您可以配置RouterModule来处理锚点滚动，甚至可以多次单击带有片段的锚点。这是您需要的代码：

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

希望这可以帮助。