Angular 6 как инициализировать вспомогательные маршруты в ленивом загружаемом модуле

Я работаю над большим приложением с angular, моя проблема в том, что я пытаюсь создать мастера (как на шаге 1: заполните эту форму, шаг 2: подтвердите свои данные и т. д.) С вспомогательным маршрутом, моя проблема в том, что я не знаю, как инициализировать:

 <router-outlet name="wizard"></router-outlet>

с предопределенным дочерним маршрутом.

это мой routing.module.ts

import { AdminOutsourceComponent } from './admin-outsource.component';
import { OutsourceComponent } from "./outsource/outsource.component";

    const routes: Routes = [


       {
        path: '',
         component: AdminOutsourceComponent,

        children: [
             {
                path: ' ',
                redirectTo:'outsourcing'
              } ,
             {
                path: 'outsourcing',
                component: OutsourceComponent,
                outlet:'wizard',
                data: {
                  title: ''
                }
              } 
        ]
      }
    ];

также я пытался сделать это так:

const routes: Routes = [


         {
            path: '',
             component: AdminOutsourceComponent,

          },
         {
            path: ' ',
            redirectTo:'outsourcing'
          } ,
         {
            path: 'outsourcing',
            component: OutsourceComponent,
            outlet:'wizard'
          } 
];

а также

const routes: Routes = [

       {
        path: '',
        redirectTo: 'wizard'
    },

      {
            path: 'wizard',
            children: [
                {
                    path: '',
                    component: AdminOutsourceComponent
                },
                {
                    path: '',
                    component: OutsourceComponent,
                    outlet: 'wizard'
                }
            ]
        }
];

шаблон html:

<div class="admin-wrapper">   
outsource wizard
  <router-outlet name="wizard"></router-outlet>
</div>

Я пробовал читать официальную документацию, но об этом ничего не сказано. Пока что на <router-outlet name="wizard"></router-outlet> он просто пустой. Вот небольшое приложение, в котором я попытался воспроизвести свою проблему. https://stackblitz.com/edit/angular-auxiler-routes-cbufsy?embed=1&file=app/lazy/lazy-routing/lazy-routing.module.ts

Примечание: это дополнительный модуль, который я загружаю в свое основное приложение, а не в основной модуль, эти подмодули загружаются лениво. возможно, мне где-то не хватает какой-то конфигурации.

Обновлено:Похоже на ошибку, не уверен, что это исправлено, некоторые люди все еще сообщают о проблемах.

у обоих детей-волшебников один и тот же путь ....?

Roddy of the Frozen Peas 13.09.2018 21:57

@RoddyoftheFrozenPeas, я попытался использовать это решение, основываясь на этом вопросе: stackoverflow.com/a/39588648/2796268

Progs 13.09.2018 21:59

Когда я открываю ваши stackblitz и uncoment строки 14-18 в app.routes.ts, aux-маршрут инициализируется ComponentAux ... так что вы уже нашли решение? Или мне что-то не хватает в вашем вопросе?

Luckylooke 12.10.2018 14:52

@Luckylooke прочитал часть обновления в моем вопросе, люди все еще сообщают, что функция не работает при использовании ленивых загружаемых модулей.

Progs 12.10.2018 15:39

@ B.J.A.A. да, похоже, это та же проблема, что и у меня .. вот форк вашего stackblitz, вы можете обновить свой вопрос stackblitz.com/edit/…

Luckylooke 12.10.2018 16:36
1
5
841
1

Ответы 1

Вы можете это попробовать?

const routes: Routes = [

   {
    path: '',
    redirectTo: 'wizard'
},

  {
        path: 'wizard',
        children: [
            {
                path: '',
                component: AdminOutsourceComponent
            },
            {
                path: '',
                redirectTo: 'outsource',
                outlet: 'wizard'
            },
            {
                path: 'outsource',
                component: OutsourceComponent,
                outlet: 'wizard'
            }
        ]
    }

];

Другие вопросы по теме