热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

浅谈Angular2模块懒加载的方法

当项目变得复杂庞大以后,如果所有页面都在一个模块里,就会出现首页加载慢的问题,因为首页就已经把整个项目加载进来了。所以,很有必要根据业务将不

当项目变得复杂庞大以后,如果所有页面都在一个模块里,就会出现首页加载慢的问题,因为首页就已经把整个项目加载进来了。所以,很有必要根据业务将不同的功能分模块,以便Angular2按需加载,提升用户体验。

下面的例子是将首页放到home模块里,访问/home时加载home模块内容,仅供学习懒加载,其实首页访问路径应该是/

先看项目文件结构:

home模块放到src/app/home目录下,里面的home目录是home组件。

home模块有单独的定义和路由(home.module.ts,home-routing.module.ts)

创建HOME模块和HOME组件:

cd src/app/
mkdir home
cd home
ng g module home
ng g component home

创建HOME模块的路由配置模块

创建 home-routing.module.ts:

import {Routes, RouterModule} from "@angular/router";
import {HomeComponent} from "./home/home.component";
import {NgModule} from "@angular/core";

const routes: Routes=[
 {
  path:'',
  component:HomeComponent
 }
]

@NgModule({
 imports:[RouterModule.forChild(routes)],
 exports:[RouterModule],
 providers:[]

})
export class HomeRoutingModule{}

模块下的页面都可以单独在该模块自己的的路由配置模块上配置,而不用在app-routing.module.ts里配置,注意RouterModule.forChild(routes)

home.module.ts导入路由模块:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HomeComponent } from './home/home.component';
import {HomeRoutingModule} from "./home-routing.module";

@NgModule({
 imports: [
  CommonModule,
  HomeRoutingModule
 ],
 declarations: [HomeComponent]
})
export class HomeModule { }

在app-routing.module.ts配置路由:

import {NgModule} from "@angular/core";
import {Routes, RouterModule} from "@angular/router";
import {UserListComponent} from "./user/user-list/user-list.component";
import {UserDetailComponent} from "./user/user-detail/user-detail.component";
import {RxjsComponent} from "./rxjs/rxjs.component";
import {UserEditComponent} from "./user/user-edit/user-edit.component";
import {environment} from "../environments/environment";

const routes: Routes = [
 {
  path:'home',
  loadChildren:'app/home/home.module#HomeModule'
 }

];

@NgModule({
 imports: [RouterModule.forRoot(routes,{ useHash: environment.useHash })],
 exports: [RouterModule],
 providers: []
})
export class AppRoutingModule { }

配置home路径,使用loadChildren加载home模块

完成后打开chrome的开发者工具,切到Network,看看不同的页面是不是加载了不同的文件。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。


推荐阅读
  • 在跨浏览器开发中,一个常见的问题是关于如何在鼠标悬停时显示图片提示信息。本文深入探讨了 IE 浏览器对 IMG 元素 alt 属性的特殊处理,并提供了最佳实践建议。 ... [详细]
  • 如何清除Chrome浏览器地址栏的特定历史记录
    在使用Chrome浏览器时,你可能会发现地址栏保存了大量浏览记录。有时你可能希望删除某些特定的历史记录而不影响其他数据。本文将详细介绍如何单独删除地址栏中的特定记录以及批量清除所有历史记录的方法。 ... [详细]
  • 一个登陆界面
    预览截图html部分123456789101112用户登入1314邮箱名称邮箱为空15密码密码为空16登 ... [详细]
  • 本文介绍了使用不同工具和方法来查看设置了密码保护的易语言源码的方法。不仅限于特定浏览器,还提供了使用Chrome等主流浏览器的解决方案。 ... [详细]
  • 探讨了在 Spring MVC 框架下,JSP 页面使用 标签时遇到的数据无法正确显示的问题,并提供了可能的原因和解决方案。 ... [详细]
  • 本文详细探讨了JavaScript中四种获取CSS样式的不同方法:style、currentStyle、getComputedStyle和getBoundingClientRect。每种方法的适用场景及其兼容性问题,并提供了解决方案。 ... [详细]
  • AngularJS在IE7中的兼容性解决方案
    本文探讨了在较旧版本的Internet Explorer(如IE7)中使用AngularJS时遇到的问题及解决方法,包括HTML标签的正确书写方式以及如何添加对JSON的支持。 ... [详细]
  • 2015款Chromebook Pixel评测:高端Chrome OS笔记本体验
    在笔记本电脑领域,Chromebook Pixel凭借其精致的铝合金外壳、细腻的显示屏和舒适的键盘,成为了外观设计的佼佼者。然而,尽管外观出众,它是否值得购买仍需考量。 ... [详细]
  • 本文介绍如何确保浏览器驱动与浏览器版本兼容,并详细说明在成功调用浏览器后如何创建和管理Session。同时,提供了一些常用的Selenium定位元素的方法。 ... [详细]
  • 本文介绍了如何利用Selenium和Python通过执行JavaScript代码来控制网页中的滚动条,包括垂直和水平滚动条的控制,以及特定元素的聚焦技术。 ... [详细]
  • Web App vs Native App:未来的移动应用趋势
    随着移动互联网的发展,Web App和Native App之间的竞争日益激烈。对于开发者而言,选择哪一种技术路径更为明智?本文将深入探讨两种应用模式的特点及未来趋势。 ... [详细]
  • 利用CSS3和React实现数字滚动动画组件
    在前端开发中,数字滚动动画是一个常见的需求。本文将详细介绍如何使用CSS3和React构建一个数字滚动动画组件,包括组件的代码实现和样式设计。如果您对HTML版本感兴趣,欢迎留言获取。 ... [详细]
  • Vue项目中应用骨架屏实践
    在当前开发的项目中,由于登录过程涉及多次重定向,导致用户体验不佳。为了改善这一状况,本文介绍了如何使用vue-skeleton-webpack-plugin插件在Vue项目中实现骨架屏,以减少用户感受到的白屏时间。 ... [详细]
  • 如何安装Google访问辅助插件
    在许多地区,直接访问Google可能受到限制。不过,通过使用特定的工具如Google访问辅助插件,可以绕过这些限制。本文将详细介绍如何安装这一实用的浏览器插件。 ... [详细]
  • 将基于Web的互动多媒体体验引入手机和平板电脑历来面临诸多挑战,如性能瓶颈、API兼容性和HTML5音频及视频播放限制等问题。本文探讨了如何克服这些障碍,为《霍比特人:史矛革之战》打造了一个移动优先的沉浸式网络体验。 ... [详细]
author-avatar
陈亮跑街向_114
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有