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

Question

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

Это мой identifier-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 {
}

Что означает, что когда я перенаправляю на маршрут identifier , он переходит непосредственно к компоненту QuestionnairesComponent, но я хотел бы сначала показать IdentifyComponent , а затем маршрут к Анкета Компонента через ссылку.

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 {
}