在Angular中,可以使用惰性加载来加载子级子级路由器。下面是一个示例解决方法的代码示例:
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
const routes: Routes = [
{
path: 'parent',
loadChildren: () => import('./parent/parent.module').then(m => m.ParentModule)
}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { ParentComponent } from './parent.component';
const routes: Routes = [
{
path: '',
component: ParentComponent,
children: [
{
path: 'child',
loadChildren: () => import('./child/child.module').then(m => m.ChildModule)
}
]
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class ParentRoutingModule { }
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { ChildComponent } from './child.component';
const routes: Routes = [
{
path: '',
component: ChildComponent,
children: [
{
path: 'grandchild',
loadChildren: () => import('./grandchild/grandchild.module').then(m => m.GrandchildModule)
}
]
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class ChildRoutingModule { }
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { GrandchildComponent } from './grandchild.component';
const routes: Routes = [
{
path: '',
component: GrandchildComponent
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class GrandchildRoutingModule { }
通过这种方式,Angular将按需加载每个级别的路由器,并且只在需要时加载相关的组件和模块。