问题描述
有人可以帮我让 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>
注意事项：
-
co-trigger和co-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
关于如何使“滚动到锚定目标”功能起作用的任何想法？
解决方法
为此我使用了一个名为 ngx-page-scroll 的包。
,你可以使用这样的东西。
第一步
所以每个元素你都可以定义一个名为 scroll 的方法，如下所示：
app.component.html
<a class="nav-link" (click)="scroll(home)">Link Name</a>
第 2 步
在同一个组件 app.component.html 中使用 ID #home 定义您的部分，如下所示：
<section #home>
...
</section>
步骤 3
现在在 app.component.ts 中，您可以像这样实现滚动方法：
scroll(el: HTMLElement) {
el.scrollIntoView({ behavior: 'smooth' });
}