簡體   English   中英

對於延遲加載的模塊,Angular onSameUrlNavigation

[英]Angular onSameUrlNavigation for a lazy loaded module

我有一個延遲加載模塊數據重新獲取的問題。 onSameUrlNavigation根本不起作用

我有一個單獨的路由模塊用於延遲加載功能,也許我無法正確集成onSameUrlNavigation

項目結構:

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

app-routing模塊代碼:

    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”,someFeature-routes模塊,但沒有成功。 我也嘗試將onSameUrlNavigation添加到someFeature-routes模塊,但forChild只能接受一個參數

感謝用戶fridoo的評論我發現了一個解決方案

而不是重新加載組件我只是調用再次加載數據的服務

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

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM