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

Question

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

例如，您有特征 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，这就是为什么我想扩展路线，以及用于面包屑目的。

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

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),
  }
]

然后你可以像这样在功能模块中定义子路由（和"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
      }
    ]
  }
];

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

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

Simplest way to route an Angular module to multiple different modules

angular

url-routing