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

Question

我目前正在构建一个具有一些功能模块的应用程序，这些功能模块可在该应用程序的不同部分中使用。

例如，您具有FeatureA：

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

因此这将在root / featurea可用。

现在我们有了FeatureB：

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来获得如下网址：

/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，这就是为什么我想要扩展路线以及面包屑的原因。

希望此信息足以回答问题，但是如果您需要更多信息，请告诉我，我将进行编辑。

Answer 1

根据您的示例检查我进行的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),
  }
]

然后您可以在功能模块中定义子路线（和“孙子路线”）：

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

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