Angular Pagination: 스크롤 이벤트를 통한 스크롤 동작 사용자 지정

이전 게시물에서 경로 매개변수를 기반으로 continuous pagination solution을 만들었습니다. 우리가 마침내 직면한 문제는 scrollPositionRestoration 관련 문제였습니다. 권장되는 대로 enabled로 설정되어 있으며 앞으로 탐색할 때 페이지를 위로 스크롤합니다. "다음"클릭은 전방 탐색으로 간주됩니다.

사용자 지정 스크롤 동작으로 탐색

Scroll event을 통한 스크롤 동작은 Angular scrollPositionRestoration 에 모호하게 문서화되어 있습니다.

--- 인용하다:

뒤로 탐색할 때 스크롤 위치를 복원해야 하는지 여부를 구성합니다.

disabled (기본값) 아무것도 하지 않습니다. 스크롤 위치는 내비게이션에서 유지됩니다.

top 모든 탐색에서 스크롤 위치를 x = 0, y = 0으로 설정합니다.

enabled 역방향 탐색에서 이전 스크롤 위치를 복원하고 앵커가 제공된 경우 위치를 앵커로 설정하거나 스크롤 위치를 0, 0(정방향 탐색)으로 설정합니다. 이 옵션은 향후 기본값이 됩니다.

다음 예제와 같이 활성화된 동작을 조정하여 사용자 지정 스크롤 복원 동작을 구현할 수 있습니다.

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]);
      }
    });
  }
}

--- 견적을 마칩니다.

우리가 달성하고자 하는 것은 페이지를 매길 때를 제외하고는 동일한 동작입니다. 먼저 scrollPositionRestoration를 disabled로 설정해야 합니다.
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]);
          }
        }
      },
    });
  }
}

따라서 URL에 "페이지"가 ​​있으면 보기 포트가 0까지 스크롤되지 않습니다. 이것은 실제로 작동합니다. "페이지"라는 용어가 있는 페이지에 대한 링크가 있을 때까지! URL에 포함된 내용을 좀 더 구체적으로 지정하고 싶을 것입니다. 간단한 블로그의 경우 이 솔루션에 만족합니다.

다른 아이디어가 있습니까? 페이지 매김을 다르게 합니까? 알려주세요.

자원

StackBlitz App

Angular Router Extra Options