Angular 5: Как маршрутизировать вложенные лениво загруженные модули?

Question

Я пытаюсь повторно использовать вопросники функционального модуля в другом функциональном модуле. Идентифицируйте, используя ленивую загрузку, таким образом, чтобы окончательный URL-адрес был похож на Identify-Route / Questionnaires-Route. Обратите внимание, что модуль "Идентификация" также загружен с отложенной загрузкой, и что модули находятся на одном уровне. Проблема, с которой я сталкиваюсь, заключается в том, что, когда я перехожу к основному компоненту "Определить", я автоматически перенаправляюсь на дочерний маршрут для основного компонента Анкеты.

Это мой идентификатор-routing.module:

import {NgModule} from '@angular/core';
import {Routes, RouterModule} from '@angular/router';
import {IdentifyComponent} from './identify.component';

const routes: Routes = [
    {
        path: '',
        component: IdentifyComponent,
        children: [
            {
                path: 'questionnaires',
                loadChildren: 'app/questionnaires/questionnaires.module#QuestionnairesModule'
            }
        ]
    }
];

@NgModule({
    imports: [
        RouterModule.forChild(routes),
    ],
    exports: [
        RouterModule
    ]
})

export class IdentifyRoutingModule {
}

Это мой опросник-routing.module:

import {NgModule} from '@angular/core';
import {Routes, RouterModule} from '@angular/router';
import {QuestionnaireComponent} from './questionnaires/questionnaire/questionnaire.component';
import {QuestionnairesComponent} from './questionnaires/questionnaires.component';

const routes: Routes = [
    {path: 'questionnaires', component: QuestionnairesComponent},
    {path: 'questionnaire', component: QuestionnaireComponent}
];

@NgModule({
    imports: [
        RouterModule.forChild(routes)
    ],
    exports: [
        RouterModule
    ]
})

export class QuestionnairesRoutingModule {
}

и наконец мой app-routing.module

import {NgModule} from '@angular/core';
import {RouterModule, Routes} from '@angular/router';
import {errorRoute, navbarRoute} from './layouts';
import {DEBUG_INFO_ENABLED} from './app.constants';

const routes: Routes = [
    navbarRoute,
    ...errorRoute,
    {
        path: 'identify',
        loadChildren: './identify/identify.module#IdentifyModule'
    }
];

@NgModule({
    imports: [
        RouterModule.forRoot(routes, {useHash: true, enableTracing: DEBUG_INFO_ENABLED})
    ],
    exports: [
        RouterModule
    ]
})
export class AppRoutingModule {
}

Что происходит, так это то, что когда я перенаправляю на идентификационный маршрут, он переходит непосредственно к компоненту QuestionnairesComponent, но я хотел бы сначала показать IdentifyComponent, а затем направить его к компоненту QuestionnaireComponent по ссылке.

Answer 1

Если вы хотите, чтобы сначала отображался IdentifyComponent, QuestionnairesComponent не может быть его дочерним корнем...

Сделай это вместо этого...

import {NgModule} from '@angular/core';
import {Routes, RouterModule} from '@angular/router';
import {IdentifyComponent} from './identify.component';

const routes: Routes = [
     {
        path: '',
        component: IdentifyComponent
     },
     {
       path: 'questionnaires',
       loadChildren: 'app/questionnaires/questionnaires.module#QuestionnairesModule'
      }
    ];

@NgModule({
  imports: [
     RouterModule.forChild(routes),
  ],
  exports: [
    RouterModule
  ]
})

export class IdentifyRoutingModule {
}