angular 路由懒加载_angular路由

全栈程序员站长

发布于 2022-11-08 14:54:59

1.3K0

发布于 2022-11-08 14:54:59

文章被收录于专栏：全栈程序员必看

angular8路由懒加载

在angular中路由即能加载组件又能加载模块，而我们说的懒加载实际上就是加载模块，目前还没有看到懒加载组件的例子。加载组件使用的是component关键字加载模块则是使用loadChildren关键字

例子代码

父模块路由文件

import { 
 NgModule } from '@angular/core';
import { 
 Routes, RouterModule } from '@angular/router';
import { 
 HomeComponent } from './components/home/home.component';
const routes: Routes = [
{ 

path: 'home',
component: HomeComponent
},
//当前版本有两种写法
{ 
 
path: 'dynamic',
loadChildren: './modules/dynamic/dynamic.module#DynamicModule'
// loadChildren: () => import('./modules/dynamic/dynamic.module').then( m => m.DynamicModule)
}
];
@NgModule({ 

imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { 
 }

子模块Module文件

import { 
 NgModule } from '@angular/core';
import { 
 CommonModule } from '@angular/common';
import { 
 DynamicRoutingModule } from './dynamic-routing.module';
import { 
 DynamicComponent } from './dynamic.component';
import { 
 Tab1Component } from './tab1/tab1.component';
import { 
 Tab2Component } from './tab2/tab2.component';
import { 
 Tab3Component } from './tab3/tab3.component';
import { 
 DynamicDirective } from './dynamic.directive';
@NgModule({ 

declarations: [DynamicComponent, Tab1Component, Tab2Component, Tab3Component, DynamicDirective],
imports: [
CommonModule,
DynamicRoutingModule
],
entryComponents: [Tab1Component, Tab2Component, Tab3Component]
})
export class DynamicModule { 
 }

子模块路由文件

import { 
 NgModule } from '@angular/core';
import { 
 Routes, RouterModule } from '@angular/router';
import { 
 DynamicComponent } from './dynamic.component';
const routes: Routes = [
{ 

path: '',
component: DynamicComponent
}
];
@NgModule({ 

imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class DynamicRoutingModule { 
 }

注意事项

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/185279.html原文链接：https://javaforall.cn

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2022年10月6日，如有侵权请联系 cloudcommunity@tencent.com 删除

https