将 Angular 模块路由到多个不同模块的最简单方法

Simplest way to route an Angular module to multiple different modules

我目前正在构建一个应用程序,它有一些功能模块,可以在应用程序的不同部分使用。

例如,您有特征 A:

const routes: Routes = [
  {
    path: '',
    component: FeatureAMainComponent
  },
  {
    path: 'featurea/:var',
    component: SomeComponentThatDoesStuffA
  },
  {
    path: 'create',
    component: CreateAFeatureA
  },
  {
    path: ':id/edit',
    component: EditAFeatureA
  }
];

所以这将在 root/featurea 上可用。

现在我们有功能 B:

const routes: Routes = [
  {
    path: '',
    component: FeatureBMainComponent
  },
  {
    path: 'featureb/:var',
    component: SomeComponentThatDoesStuffB
  },
  {
    path: 'create',
    component: CreateAFeatureB
  },
  {
    path: ':id/edit',
    component: EditAFeatureB
  }
];

非常相似的路由,但它们用于应用程序的两个完全不同的部分。然而,尽管不同,它们确实共享一项功能,但在单独的模块中将其称为 FeatureC。从 FeatureA 和 FeatureB 模块的第二条路由,带变量的那条,都需要扩展 FeatureC 的路由。所以我的问题是:我将如何去路由 FeatureC 来获得 urls 这样的:

/featurea/:somevariable/featurec/other_stuff_from_feature_c_module_routes
/featureb/:somevariable/featurec/other_stuff_from_feature_c_module_routes

我需要将 FeatureA/FeatureB 路由保留在 url 路径中,但将 FeatureC 路由附加到这两个路径的末尾并仍然加载相同的组件。我只需要从参数中获取 :somevariable,这就是为什么我想扩展路线,以及用于面包屑目的。

希望这些信息足以回答问题,但如果您需要更多信息,请告诉我,我会进行编辑。

查看我根据您的示例制作的 Stackblitz:https://stackblitz.com/edit/angular-nqp97q

你没有包含 app.module.ts 但我想你想延迟加载你的功能模块:

const routes: Routes = [
  {
    path: 'feature-a',
    loadChildren: () => import('./feature-a/feature-a.module').then(mod => mod.FeatureAModule),
  }
]

然后你可以像这样在功能模块中定义子路由(和"grandchild routes"):

const routes: Routes = [
  {
    path: "",
    component: FeatureAMainComponent,
    children: [
      {
        path: ":var",
        component: StuffAComponent,
        children: [
          {
            path: "feature-c-child",
            component: FeatureCComponent
          }
        ]
      },
      {
        path: ":var/feature-c",
        component: FeatureCComponent
      }
    ]
  }
];

确切的结构取决于您是否要将子路由分层显示为其父组件的子路由。我想你可以从这里继续,但如果你需要进一步的帮助,请发表评论。