Самый простой способ направить модуль 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
  }
];

Очень похожие маршруты, но они предназначены для двух совершенно разных частей приложения. Однако, хотя они и отличаются друг от друга, они имеют одну функциональную возможность, но назовите ее Feature C в отдельном модуле. Из второго маршрута модулей FeatureA и FeatureB, который содержит переменную, оба должны расширять маршрут Feature C. Итак, мой вопрос: как бы я go о маршрутизации Feature C, чтобы получить URL, как это:

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

Мне нужно сохранить маршруты FeatureA / FeatureB в пути URL, но добавить Feature C маршрутизирует до конца обоих из них и все еще загружает тот же компонент. Мне просто нужно взять: некоторые переменные из параметров, поэтому я хотел бы расширить маршрут, а также для целей крошки.

Надеюсь, этого достаточно, чтобы ответить на вопрос, но, пожалуйста, дайте мне знать, если вам потребуется больше, и я отредактирую.

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
      }
    ]
  }
];

Точная структура зависит от того, хотите ли вы отобразить дочерние маршруты иерархически как дочерние элементы их родительских компонентов. Я думаю, что вы можете go отсюда, но оставьте комментарий, если вам нужна дополнительная помощь.