angular - 如何使 Angular `routerLink` 片段导航滚动到我的 `id` 目标？

Question

有人可以帮我让routerLink片段滚动工作吗？

=> “工作”意味着当我点击 routerLink 时，它会滚动到具有匹配 id 的元素。;)

我所做的代码示例：

<co-trigger routerLink="." [fragment]="item?.id" *ngFor="let item of items">Trigger</co-trigger>
...
<co-target [attr.id]="item?.id" *ngFor="let item of items">Target</co-target>

笔记：

• theco-trigger和 theco-target都在同一个模板中。
• 有些co-target实例有足够的内容，因此有一个滚动条，通过单击触发器滚动到该项目是有意义的。
• 导航栏中的 url 按预期更改url#item-id，但是单击触发器时不会发生滚动。

我的AppRoutingModule设置：

@NgModule({
  imports: [
    RouterModule.forRoot(
      routes,
      {
        onSameUrlNavigation: 'reload',
        anchorScrolling: 'enabled',
        scrollPositionRestoration: 'enabled',
        scrollOffset: [0, 64], // [x, y] - adjust scroll offset
      }
    ),
  ],
  exports: [RouterModule]
})
export class AppRoutingModule {
}

上下文信息：

Angular: 11.2.6

关于我可以做些什么来使“滚动到锚定目标”功能起作用的任何想法？

标签： angularscrollnavigationrouterlinkangular-routerlink

Answer 1

为此，我使用了一个名为ngx-page-scroll的包。