게으른 부하 모듈의 각도 onSameUrlNavigation

게으른 부하 모듈의 각도 onSameUrlNavigation

느리게 로드된 모듈 데이터 다시 추출에 문제가 있어. SameUrlNavigation은 단순히 작동하지 않음

느리게 로드된 기능을 위한 별도의 라우팅 모듈이 있으며 SameUrlNavigation에서 제대로 통합하지 못한 경우

프로젝트 구조:

app/
    app.component.ts
    app.module.ts
    app-routing.module.ts
        someFeature/
            someFeature.module.ts
            someFeature-routes.module.ts
            someFeature.component.ts

앱이 연결된 모듈 코드:

    export const routes: Routes = [{
      {
      path: 'myfeature',
      loadChildren: () => import('./someFeature/someFeature.module').then(m => m.someFeatureModule),
      canActivate: [AuthGuard],
      runGuardsAndResolvers: 'always',
    }}]

@NgModule({
  imports: [RouterModule.forRoot(routes, {onSameUrlNavigation: 'reload'})],
  exports: [RouterModule],
})
export class AppRoutingModule {
}

느리게 로드된 라우팅 모듈:

    const routes: Routes = [
      {
        path: '',
        component: someFeatureComponent,
      },
    ];
    @NgModule({
      imports: [RouterModule.forChild(routes)],
      exports: [RouterModule],
    })

구성 요소 코드:

    ngOnInit(): void {
    this.unsubscribe$ = new Subject<void>();
    this.route
      .queryParams.pipe(
      takeUntil(this.unsubscribe$),
      map(p => {
        this.loading = true;
        if (p.page && p.limit) {
          this.page = p.page;
          this.limit = p.limit;
        }
        return {
          page: this.page,
          limit: this.limit,
        };
      }),
      flatMap((f) => this.myService.getData(f)),
      tap(() => this.loading = false),
    )
      .subscribe((payload) => {
        this.data = payload.data;
      })
    ;
  }

문제가 있는 섹션(구성 요소 코드에서)

 reload(): void {
    this.router.navigate(['someFeature'], {queryParams: {page: this.page, limit: this.limit}});
  }
refetchDataOnClick(){
 this.reload();
}

첫 번째 요청에서 데이터를 가져오지만(그래서 모듈 가져오기 등에 문제가 없다고 판단), API에 추가 요청이 없다는 것을 알 수 있어 재추출은 이뤄지지 않고 있다.

나는 "runGuardsAndResolvers" , 몇몇 기능-루트 모듈을 추가하고 제거하려고 했지만 성공하지 못했다.SameUrlNavigation을 일부 Feature-routes 모듈에 추가하려고 했지만 forChild는 하나의 매개 변수만 사용할 수 있다.

사용자 프리도의 코멘트 덕분에 나는 해결책을 찾았다.

구성 요소를 다시 로드하는 대신 데이터를 다시 로드하는 서비스를 호출함

this.loading = true;
    this.myService.getData({page: this.page, limit: this.limit})
      .pipe(
        takeUntil(this.unsubscribe$),
        finalize(() => this.loading = false))
      .subscribe((payload) => {
        this.data = payload.data;
      });

참조URL: https://stackoverflow.com/questions/57890381/angular-onsameurlnavigation-for-a-lazy-loaded-module