延迟加载模块的 Angular onSameUrlNavigation

McA*_*ome 6 javascript lazy-loading rxjs angular-routing angular

我有延迟加载模块数据重新获取的问题。onSameUrlNavigation 根本不起作用

我有一个单独的路由模块用于延迟加载功能,也许我无法正确集成 onSameUrlNavigation

项目结构:

app/
    app.component.ts
    app.module.ts
    app-routing.module.ts
        someFeature/
            someFeature.module.ts
            someFeature-routes.module.ts
            someFeature.component.ts
Run Code Online (Sandbox Code Playgroud)

应用路由模块代码:

app/
    app.component.ts
    app.module.ts
    app-routing.module.ts
        someFeature/
            someFeature.module.ts
            someFeature-routes.module.ts
            someFeature.component.ts
Run Code Online (Sandbox Code Playgroud)

懒加载路由模块:

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

组件代码:

    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;
      })
    ;
  }
Run Code Online (Sandbox Code Playgroud)

这是有问题的部分(在组件代码中)

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

在第一个请求时获取数据(所以我决定模块导入或类似的东西没有问题),但是重新获取没有发生,因为我可以看到 API 上没有其他请求。

我尝试添加和删除“runGuardsAndResolvers”,someFeature-routes 模块,但没有成功。我也尝试将 onSameUrlNavigation 添加到 someFeature-routes 模块,但 forChild 只能接受一个参数

McA*_*ome 1

感谢用户frido的评论我找到了解决方案

我不重新加载组件,而是调用再次加载数据的服务

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;
      });
Run Code Online (Sandbox Code Playgroud)