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à scrollPositionRestorationvấn đề liên quan. Nó được đặt thành enablednhư đượ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.
• enabledKhô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, scrollPositionRestorationphả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