[英]Angular 5: How to routing nested lazy-loaded modules?
I'm trying to reuse a feature-module Questionnaires in another feature-module Identify , by using lazy-loading, in such a way that the final URL should be like Identify-Route/Questionnaires-Route . 我试图通过使用延迟加载在另一功能模块Identify中重用功能模块问卷 ,以使最终URL应该类似于Identify-Route / Questionnaires-Route 。 Note that the Identify module is lazy-loaded too, and that the modules are at the same level. 请注意,Identify模块也是延迟加载的,并且模块处于同一级别。 The problem I'm encountering is that when I go to the Identify main component, I'm automatically redirect to the child route for the main Questionnaires component. 我遇到的问题是,当我转到“识别”主要组件时,我会自动重定向到主要“问卷”组件的子路由。
This is my identify-routing.module : 这是我的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 {
}
This is my questionnaires-routing.module : 这是我的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 {
}
and finally my app-routing.module 最后是我的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 {
}
What is appening is that when I redirect to the identify route, it jumps directly to the QuestionnairesComponent, but I'd like to show first the IdentifyComponent and then route to the QuestionnaireComponent through a link. 出现的是,当我重定向到标识路线时,它直接跳到QuestionnairesComponent,但是我想先显示IdentifyComponent ,然后再通过链接路由到QuestionnaireComponent。
If you want the IdentifyComponent to show first, QuestionnairesComponent cannot be its child root... 如果要先显示IdentifyComponent,则QuestionnairesComponent不能是其子根...
Do this instead... 改为这样做...
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 {
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.