У меня есть следующая проблема:
Я реализовал таблицу с разбивкой на страницы в Angular, используя PrimeNG. При переключении страницы я хочу, чтобы она автоматически прокручивалась вверх.
Я уже пробовал window.scroll и ViewportScroller, но ни один из них не повлиял на поведение прокрутки.
Поскольку моя страница состоит из различных компонентов, я считаю, что это связано с элементом, который следует прокручивать.
Есть ли способ найти элемент прокрутки, а затем установить его в верхней части страницы?
app.comComponent.html
<div slot = "content" class = "w-full">
<router-outlet></router-outlet>
</div>
руководство-поиск.компонент.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.
@NgModule({
declarations: [],
imports: [
RouterModule.forRoot(
appRoutes,
{
anchorScrolling: "enabled"
}
)
],
exports: [
RouterModule
]
})
Затем вам нужно импортировать Router в свой компонент, использовать функцию Router.navigate и определить идентификатор для элемента, к которому вы хотите прокрутиться.
this.router.navigate([], { fragment: 'fragmentIdToScrollTo' })
HTML
<div id='fragmentIdToScrollTo'></div>
Да, это решило проблему! Танк для этого.
Предоставьте достаточно кода, чтобы другие могли лучше понять или воспроизвести проблему.