Angular 9.1.9 условная маршрутизация с параметром

Question

Контекст:

У меня есть кнопка «Назад и продолжить», которая позволяет проходить этапы и их дочерние шаги в мастере.

Вопрос:

У меня следующая маршрутизация:

{
    path: 'test/stage/1',
    component: WizardComponent,
    children: [
      {
        path: 'step/1',
        component: Stage1Step1Component,
      },
      {
        path: 'step/2',
        component: Stage1Step2Component,
      }   
    ]
  },
  {
    path: 'test/stage/2',
    component: WizardComponent,
    children: [
      {
        path: 'step/1',
        component: Stage2Step1Component,
      },
      {
        path: 'step/2',
        component: Stage2Step2Component,
      }   
    ]
  },

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

Мне нужно сказать:

если этап 1, загрузить x набор шагов, но если этап 2, загрузить y набор шагов.

Проблема, с которой я столкнулся, заключается в том, что когда я перехожу к stage / 2 / step / 1, он снова загружает WizardComponent, и я бы хотел этого избежать.

Есть ли хороший способ иметь

test/stage/:stage

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

Может быть, что-то вроде этого?

{
    path: 'test/stage/:stage',
    component: WizardComponent,
    children: [
      {
        path: '1/step/1',
        component: Stage1Step1Component,
      },
      {
        path: '1/step/2',
        component: Stage1Step2Component,
      }   
      {
        path: '2/step/1',
        component: Stage2Step1Component,
      },
      {
        path: '2/step/2',
        component: Stage2Step2Component,
      }   
    ]
  }

(Вышеуказанное не работает)

Answer 1

Я идиот, это действительно просто:

Мне просто нужно было сделать это вместо:

{
    path: 'test',
    component: WizardComponent,
    children: [
      {
        path: 'stage/1/step/1',
        component: Stage1Step1Component,
      },
      {
        path: 'stage/1/step/2',
        component: Stage1Step2Component,
      }   
      {
        path: 'stage/2/step/1',
        component: Stage2Step1Component,
      },
      {
        path: 'stage/2/step/2',
        component: Stage2Step2Component,
      }   
    ]
  }

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

// This is wrong and horrible, but can't figure out another way yet. Perhaps lazyprovider in the route?
let stageNumber = parseInt(window.location.pathname.split("/")[3]) // parseInt(this.route.parent.snapshot.url[2].path);
let stepNumber = parseInt(window.location.pathname.split("/")[5]) // parseInt(this.route.parent.snapshot.url[4].path);