Question

我尝试在另一个功能模块识别中重复使用功能模块调查问卷，使用延迟加载，以最终方式网址应该像识别路线/问卷调查路线。请注意，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 {
}

这是我的问卷调查 - 路由。模块：

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

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

1 个答案: