如何解决如何让 Angular `routerLink` 片段导航滚动到我的 `id` 目标?
有人可以帮我让 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' });
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。