angular4 模块懒加载

( 在项目目录下使用命令行工具)

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
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
### 回答1: 如果要在 Angular 中调用懒加载模块里的路由,你需要在根路由模块中使用 `loadChildren` 属性来配置懒加载。这个属性可以接受一个模块的路径字符串,并返回一个懒加载函数。 下面是一个示例: ``` const routes: Routes = [ { path: 'lazy', loadChildren: () => import('./lazy/lazy.module').then(m => m.LazyModule) } ]; ``` 然后,你可以在懒加载模块里的路由模块中配置你的路由。 ``` const routes: Routes = [ { path: '', component: LazyComponent } ]; @NgModule({ imports: [RouterModule.forChild(routes)], exports: [RouterModule] }) export class LazyRoutingModule { } ``` 现在,你就可以通过访问 `/lazy` 来访问这个懒加载模块里的路由了。 ### 回答2: 在Angular中,使用懒加载模块可以提高应用的性能和加载速度。当需要使用到某个模块时,可以通过懒加载来按需加载该模块,而不是在应用启动时一次性加载全部模块。 要调用懒加载模块里的路由,首先需要在主模块路由配置中定义懒加载路由。在定义路由时,路径中需要指定懒加载模块的路径,并通过loadChildren属性来加载模块。例如: ```typescript const routes: Routes = [ { path: 'lazy', loadChildren: 'app/lazy/lazy.module#LazyModule' } ]; ``` 这样在访问路径为"/lazy"时,会触发懒加载加载LazyModule模块。接下来,我们可以在懒加载模块中定义自己的路由。例如: ```typescript const routes: Routes = [ { path: '', component: LazyComponent }, { path: 'details', component: DetailsComponent } ]; ``` 这样就可以通过"/lazy/details"访问到懒加载模块中的DetailsComponent组件了。 在应用中调用懒加载模块里的路由时,可以使用routerLink指令或者调用Router服务的navigate方法。例如: ```html <a [routerLink]="['/lazy']">Lazy Module</a> <a [routerLink]="['/lazy/details']">Details</a> ``` 或者在组件中通过Router服务的navigate方法来实现路由跳转: ```typescript import { Router } from '@angular/router'; @Component({...}) export class MyComponent { constructor(private router: Router) {} goToLazyModule() { this.router.navigate(['/lazy']); } goToDetails() { this.router.navigate(['/lazy/details']); } } ``` 以上就是如何在Angular中调用懒加载模块里的路由的方法。通过懒加载可以按需加载模块路由,从而提高应用的性能和加载速度。 ### 回答3: Angular中的懒加载是一种优化技术,它允许将模块按需加载,而不是在应用启动时一次性加载所有模块。 调用懒加载模块里的路由是通过在应用中定义路由并配置懒加载模块的路径来实现的。当用户访问到该路由时,Angular会根据配置的懒加载路径动态加载该模块,并且渲染出对应的组件。 要实现这个功能,我们需要在应用的路由配置文件中指定需要懒加载模块的路径。例如,假设我们有一个名为`LazyModule`的模块,我们可以在路由配置文件中如下定义该模块路由: ```typescript const routes: Routes = [ { path: 'lazy', loadChildren: () => import('./lazy.module').then(m => m.LazyModule) } ]; ``` 上述代码中,`loadChildren`属性指定了懒加载模块的路径,使用`import().then()`的语法来动态加载该模块,并返回一个`Promise`对象。 当用户访问到路径`/lazy`时,Angular会自动加载`LazyModule`模块,并根据该模块路由配置渲染对应的组件。 总结起来,要调用懒加载模块里的路由,我们需要在应用的路由配置文件中定义懒加载模块的路径,并在访问对应的路由时,Angular会自动加载该模块并渲染组件。这样可以提高应用的初始加载速度和性能。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值