我有以下问题:
我使用 PrimeNG 在 Angular 中实现了一个分页表。我希望切换页面时自动滚动到顶部。
我已经尝试过 window.scroll 和 ViewportScroller,但两者都对滚动行为没有任何影响。
由于我的页面由各种组件组成,我相信它与应该滚动的元素有关。
有没有办法一般找到滚动元素然后将其设置到页面顶部?
app.component.html
<div slot="content" class="w-full">
<router-outlet></router-outlet>
</div>
手动搜索.component.ts
该组件在路由器出口内渲染,拉伸内容槽。发出 onPageChange 事件后,我想导航到页面顶部
public onPageChange(event: Observable<any>, type: 'Card' | 'Ticket') {
event.subscribe((data) => {
if (type == 'Card') {
this.cards$.next(data);
} else {
this.tickets$.next(data);
}
});
}
也许这个问题可以帮助你。
为此,您需要在 RouterModule 配置中启用anchorScrolling
@NgModule({
declarations: [],
imports: [
RouterModule.forRoot(
appRoutes,
{
anchorScrolling: "enabled"
}
)
],
exports: [
RouterModule
]
})
然后你需要在你的组件中导入 Router 并使用 Router.navigate 函数并为你想要滚动到的元素定义一个 id
this.router.navigate([], { fragment: 'fragmentIdToScrollTo' })