角度5：如何路由嵌套的延迟加载模块？

Question

我试图通过使用延迟加载在另一功能模块Identify中重用功能模块问卷 ，以使最终URL应该类似于Identify-Route / Questionnaires-Route 。 请注意，Identify模块也是延迟加载的，并且模块处于同一级别。 我遇到的问题是，当我转到“识别”主要组件时，我会自动重定向到主要“问卷”组件的子路由。

这是我的identify-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 {
}

这是我的surveys-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 {
}