Angular Routing 打开错误的组件

标签 angular typescript jhipster angular-routing

我想延迟加载一个模块,然后该模块不应延迟加载其他模块。我设法让延迟加载工作,但它随后显示了错误的组件,即使路线是正确的。

enter image description here

正如您所看到的,路径是正确的,因为我希望显示“Push-Campaign”页面。然后它向我显示“客户定位”组件。

应用程序路由.module.ts

const LAYOUT_ROUTES = [navbarRoute, ...errorRoute];

const routes: Routes = [
    {
      path: 'admin',
      data: {
        authorities: [Authority.ADMIN],
      },
      canActivate: [UserRouteAccessService],
      loadChildren: () => import('./admin/admin-routing.module').then(m => m.AdminRoutingModule),
    },
    {
      path: 'account',
      loadChildren: () => import('./account/account.module').then(m => m.AccountModule),
    },
    {
      path: 'recommended-section',
      loadChildren: () => import('./entities/recommended-section/recommended-section.module').then(m=> m.RecommendedSectionModule),
    },
    {
      path: 'push-campaign',
      loadChildren: () => import('./entities/push-campaign/push-campaign.module').then(m=> m.PushCampaignModule),
    },
    {
      path: 'customer',
      loadChildren: () => import('./entities/customer/customer.module').then(m=> m.CustomerModule),
    },
    ...LAYOUT_ROUTES,
  ]

@NgModule({
  imports: [
    RouterModule.forRoot(routes,{ enableTracing: DEBUG_INFO_ENABLED }),],
  exports: [RouterModule],
})
export class AppRoutingModule {}

push-campaign.module.ts

@NgModule({
  imports: [SharedModule, TargetingModule, PushCampaignRoutingModule, PushChannelModule, AppDeepLinkModule, AudienceModule, PushCampaignDeploymentModule],
  declarations: [
    PushCampaignComponent,
    PushCampaignDetailComponent,
    PushCampaignUpdateComponent,
    PushCampaignDeleteDialogComponent,
    PushCampaignPreviewComponent,
  ],
  entryComponents: [PushCampaignDeleteDialogComponent],
})
export class PushCampaignModule {}

目标.module.ts

@NgModule({
  imports: [SharedModule, ClientTargetingModule],
  declarations: [
    TargetingComponent,
    TargetingDetailComponent,
    TargetingUpdateComponent,
    TargetingDeleteDialogComponent,
    TargetingClientComponent,
  ],
  exports: [TargetingUpdateComponent],
  entryComponents: [TargetingDeleteDialogComponent],
})
export class TargetingModule {}

client-targeting.module.ts


@NgModule({
  imports: [SharedModule, RouterModule.forChild(clientTargetingRoute)],
  declarations: [
    ClientTargetingComponent,
    ClientTargetingDetailComponent,
    ClientTargetingUpdateComponent,
    ClientTargetingDeleteDialogComponent,
  ],
  entryComponents: [ClientTargetingDeleteDialogComponent],
})
export class ClientTargetingModule {}

为什么会这样?我该如何解决它?

感谢您提前提供的帮助。

最佳答案

所以我修好了它!正如评论中所述,我添加了一个routing.module,但它仍然不起作用...所以我只是尝试了一下,最后通过更改 push-campaign.module.ts 中的导入顺序使其正常工作。 :

@NgModule({
  imports: [SharedModule, RouterModule.forChild(pushCampaignRouterModule), TargetingModule, ...

RouterModule.forChild() 是否有原因?必须在所有其他导入模块之前吗?

关于Angular Routing 打开错误的组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/66798542/

相关文章:

javascript - 如何从类属性 TypeScript - Angular 中监听值的变化

angular - TypeError : val. set is not a function (JS Map())

javascript - 如何为数组中的每个元素绕过 SecurityTrustResourceUrl?

java - Java 中枚举的缺点是什么?

angular - 如何从ngrx store获取值

html - 在 Angular 6 应用程序中使用静态 HTML 登陆页面模板

typescript : avoid extra properties

javascript - 如何检测到在 <input type ="file"/> 选择文件对话框中单击了取消按钮?

postgresql - 将 jhipster 远程连接到 postgres

java - 如何执行 Junit 测试?