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

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

如何让这两个不同的路由从同一个延迟加载模块打开它们的特定组件？

Stackblitz: https://stackblitz.com/edit/angular-w3rc5g 请参阅 /discover 和 /anyUserName1

Answer 1

尝试下面的示例代码，在路由模块中进行更改

在应用中-routing.moudle.ts:

const routes: Routes = [
  {
    path: '',
    loadChildren: () => import('./platform/platform.module').then(m => m.PlatformModule)
  },
];

在平台-routing.module.ts:

const routes: Routes = [
  {
    path: "user",
    children: [
      {
        path: ":user",
        component: UserProfileComponent
      }
    ]
  },
  {
    path: "discover",
    component: DiscoverComponent
  },
  {
    path: "",
    redirectTo: "discover",
    pathMatch: "full"
  }
];

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

Lazy load same module from different paths

angular

angular-router