typescript - Angular 懒加载路由忽略父路径
我正在使用 Angular 6.1,我尝试使用懒加载路由设置一个应用模块和一个功能模块(称为实体模块)。我想创建一个路由 /entities/list,链接到我的实体模块中的一个组件。但是我无法让这个路由生效。相反,当我导航到 /list 时,该组件才会显示。为什么我的路由会忽略父路径 /entities?
app.module.ts:
import {NgModule} from '@angular/core';
import {AppComponent} from './app.component';
import {AppRoutingModule} from './app-routing.module';
import {BrowserModule} from '@angular/platform-browser';
import {EntitiesModule} from './entities/entities.module';
@NgModule({
bootstrap: [AppComponent],
declarations: [AppComponent],
imports: [AppRoutingModule, BrowserModule, EntitiesModule],
providers: []
})
export class AppModule {}
app-routing.module.ts:
import {NgModule} from '@angular/core';
import {RouterModule, Routes} from '@angular/router';
const routes: Routes = [
{path: 'entities', loadChildren: './entities/entities.module#EntitiesModule'},
{path: '', redirectTo: '', pathMatch: 'full'}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule {}
app.component.ts:
import {Component} from '@angular/core';
@Component({
selector: 'app-root',
template: 'app <router-outlet></router-outlet>'
})
export class AppComponent {}
entities/entities.module.ts:
import {NgModule} from '@angular/core';
import {EntitiesRoutingModule} from './entities-routing.module';
import {EntitiesComponent} from './entities.component';
@NgModule({
declarations: [EntitiesComponent],
imports: [EntitiesRoutingModule]
})
export class EntitiesModule {}
entities/entities-routing.module.ts:
import {NgModule} from '@angular/core';
import {Routes, RouterModule} from '@angular/router';
import {EntitiesComponent} from './entities.component';
const routes: Routes = [
{path: 'list', component: EntitiesComponent}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class EntitiesRoutingModule {}
entities/entities.component.ts:
import {Component} from '@angular/core';
@Component({
selector: 'app-entities',
template: 'entities'
})
export class EntitiesComponent {}
我也尝试过在实体模块中使用以下方式定义路由,但在导航到 /list 时,组件仍然会显示,而不是导航到 /entities/list。
const routes: Routes = [
{
path: '', children: [
{path: 'list', component: EntitiesComponent}
]
}
];
我做错了什么?任何帮助都感激不尽!
答案#1
你正在尝试进行懒加载。然而,你正在进行急切加载。
在 app.module.ts 中,以下这一行:
imports: [AppRoutingModule, BrowserModule, EntitiesModule],
正在加载实体模块。将其从那里移除以进行懒加载,应该就能正常工作。
答案#2
尝试将延迟加载的模块作为子模块加载。
{
path: 'entities',
children: [{
path: '',
loadChildren: './entities/entities.module#EntitiesModule'
}]
}
