从不同路径延迟加载相同的模块

Question

我有以下app-routing.module.ts：

  {
    path: 'discover',
    loadChildren: () => import('./components/platform/user-profile/platform.module').then(m => m.PlatformModule)
  },
  {
    path: ':userRoute',
    loadChildren: () => import('./components/platform/user-profile/platform.module').then(m => m.PlatformModule)
  },

我的目标是/ discover应该从PlatformModule打开DiscoverPageComponent

/ userName1应该从PlatformModule打开UserPageComponent

我的platform-routing.module.ts包含以下内容：

  {
    path: '',
    component: UserProfileComponent,
  },
  {
    path: 'discover',
    component: DiscoverPageComponent,
  },

这不起作用，因为/ discover将始终打开UserProfileComponent而不是DiscoverPageComponent。我只能从/ userName1 / discover

打开DiscoverPageComponent。

如何让这两条不同的路线从同一延迟加载的模块中打开其特定组件？

Answer 1

在您的app-routing.module.ts中：

    {
      path: '',
      loadChildren: () => import('./components/platform/user-profile/platform.module').then(m => m.PlatformModule)
    }

在您的platform-routing.module.ts中：

    {
      path: '',
      component: platform-container.component.ts,
      children: [
         {
            path: ':userRoute',
            component: UserProfileComponent
         },
         {
            path: 'discover',
            component: UserProfileComponent
         }
       ]
    }

您只需要在platform-container.component.html中进行定义：

这应该工作。

问候