Phân trang góc: Tùy chỉnh hành vi cuộn thông qua sự kiện cuộn

Trong bài trước, tôi đã thực hiện một giải pháp phân trang liên tục dựa trên các tham số của tuyến đường. Vấn đề cuối cùng chúng tôi phải đối mặt là scrollPositionRestoration
vấn đề liên quan. Nó được đặt thành enabled
như được khuyến nghị, sẽ cuộn trang lên trên điều hướng về phía trước. Lần nhấp "tiếp theo", được coi là chuyển hướng về phía trước.
Điều hướng với hành vi cuộn tùy chỉnh
Hành vi cuộn qua sự kiện Scroll được ghi lại một cách mơ hồ trong Angular scrollPositionRestoration
:
- Trích dẫn:
Định cấu hình nếu vị trí cuộn cần được khôi phục khi điều hướng trở lại.
disabled
(Mặc định) Không làm gì cả. Vị trí cuộn được duy trì trên điều hướng.top
Đặt vị trí cuộn thành x = 0, y = 0 trên tất cả các điều hướng.enabled
Khôi phục vị trí cuộn trước đó trên điều hướng lùi, nếu không sẽ đặt vị trí này thành neo nếu được cung cấp hoặc đặt vị trí cuộn thành 0, 0 (điều hướng tiến). Tùy chọn này sẽ là mặc định trong tương lai.
class AppModule {
constructor(router: Router, viewportScroller: ViewportScroller) {
router.events.pipe(
filter((e: Event): e is Scroll => e instanceof Scroll)
).subscribe(e => {
if (e.position) {
// backward navigation
viewportScroller.scrollToPosition(e.position);
} else if (e.anchor) {
// anchor navigation
viewportScroller.scrollToAnchor(e.anchor);
} else {
// forward navigation
viewportScroller.scrollToPosition([0, 0]);
}
});
}
}
Những gì chúng ta muốn đạt được là cùng một hành vi ngoại trừ khi chúng ta đang phân trang. Đầu tiên, scrollPositionRestoration
phải được đặt thành disabled
.
Trong app.route.ts
:
@NgModule({
// disable scroll position auto handling to override
imports: [
RouterModule.forRoot(routes, {
scrollPositionRestoration: 'disabled',
}),
],
exports: [RouterModule],
})
export class AppRouteModule {
// copy code from Angular
constructor(router: Router, viewportScroller: ViewportScroller) {
router.events.pipe(filter((event) => event instanceof Scroll)).subscribe({
next: (e: Scroll) => {
if (e.position) {
// backward navigation
viewportScroller.scrollToPosition(e.position);
} else if (e.anchor) {
// anchor navigation
viewportScroller.scrollToAnchor(e.anchor);
} else {
// forward navigation
// check url if page exists do not scroll
if (!e.routerEvent.urlAfterRedirects.includes('page')) {
viewportScroller.scrollToPosition([0, 0]);
}
}
},
});
}
}
Bạn có ý tưởng khác không? Bạn có phân trang khác đi không? Làm ơn cho tôi biết.
Tài nguyên
- Ứng dụng StackBlitz
- Các tùy chọn bổ sung của bộ định tuyến Angular
- Trên nhà để xe Sekrab