angular4 模块懒加载
来源:互联网 发布:网络维护基础知识 编辑:程序博客网 时间:2024/06/08 10:12
( 在项目目录下使用命令行工具)
1.ng g module confirm-order --routing
2.ng g component confirm-order
(注意顺序,先创建module,然后增加组件时angular-cli会自动将component导入到module中)
3.配置路由confirm-order-routing.module.ts
const routes: Routes = [
{
path: '',
component: ConfirmOrderComponent,
data: { title: '确认订单' }
}
];
4.配置路由app-routing.module.ts
const routes: Routes = [
{
path: '',
redirectTo: 'home',
pathMatch: 'full'
},
{
path: 'home',
loadChildren: './home/home.module#HomeModule'
},
{
path: 'confirm-order',
loadChildren: './confirm-order/confirm-order.module#ConfirmOrderModule'
}
];
最后附上部分截图:
图1. 项目结构
图2. ConfirmOrderModule模块
图3. ConfirmOrderRoutingModule路由模块
图4. AppRoutingModule路由模块
阅读全文
0 0
- angular4 模块懒加载
- angular4中的模块预加载的控制和实现
- Angular4
- Angular4
- (五)懒加载模块
- Angular4中的组件、模块、服务、装饰器、控制器
- 模块加载
- Angular4记账webApp练手项目之五(Angular4项目中创建service(服务)和使用http模块)
- 模块-模块加载时参数设置
- linux内核模块加载
- 加载helloworld模块
- Asterisk 可加载模块
- 模块动态加载技术
- Flex动态加载模块
- 内核模块加载命令
- flex 模块加载切换
- modprobe加载自定义模块
- ModuleLoader加载模块
- shell基础
- 第八周【项目2
- Linux 基础命令(二)
- CSS特殊字符表
- # 设计模式之----命令模式
- angular4 模块懒加载
- MQTT协议之订阅及发布(使用paho-mqtt-client或mqttv3实现)
- 网络请求数据 Banner轮播
- MemoryModule阅读与PE文件解析(一)
- uml 构件
- charles 学习笔记之代理http,https请求
- 属性动画抛物线
- bzoj 3341: [Ceoi2013]adriatic
- openpyxl读写Excel文件