2021腾讯数字生态大会直播预约通道开启!技术内容大爆发,开发者必看! 了解详情
写点什么

这里有本 Angular 修炼秘籍送你(一)

2020 年 1 月 07 日

这里有本Angular修炼秘籍送你(一)

今年 1 月份开始接触 angular 的新版本 Angular5,之前一直是用的 angular1.x。开始了 angular5 的踩坑之路,话不多说进入正题吧。


初识 angular5


学习 angualr5 的文章很多,推荐博文(复制链接到浏览器打开)


https://segmentfault.com/a/1190000008754631


初学问题


1. 打包之后的文件运行问题

直接打开 index.html 页面无法打开,控制台会报如下的错误:



是因为 angular 是基于 npm 环境搭建的,打包后的文件需要在模拟服务器上打开。


解决方案:可以全局安装 npm 的 http-server 模块。构建本地 web 模拟服务器。


安装方法:在 cmd 窗口执行命令:npm install http-server –g


使用方法:在 index 所在文件夹执行 cmd 窗口命令:hs –p 端口号 –o 即可打开运行。


2. 多级路由嵌套及懒加载问题

如果项目当中页面嵌套过多的情况,会出现路由嵌套的情况。


多级路由嵌套两种写法:


1)直接进行路由嵌套如下:


(左右/上下滑动可查看全部代码)


{   path: 'dashboard', component: DashboardComponent, canDeactivate: [CanLeaveDetail],   children: [     { path: 'partA', component: DashboardPartAComponent },     { path: 'partB', component: DashboardPartBComponent },     { path: 'partC', component: DashboardPartCComponent }   ]}
复制代码


2)懒加载模式:


主路由:(左右/上下滑动可查看全部代码)


{   path: 'lifeCycle',   canActivate: [AuthService],   loadChildren: './LifecycleHooks/lifeCycleHooks.module#LifeCycleHooksModule'}
子路由:(左右/上下滑动可查看全部代码){ path: '', // 使用loadChildren方式此处路径为空 component: LifeCycleHooksComponent, children: [ { path: '', redirectTo:'componentLC', pathMatch: 'full'}, { path: 'componentLC', component:ComponentLCComponent } ]}
复制代码


子路由全部用 loadChildren 加载,到这个路由的时候在加载路由下的模块及组件。


loadChildren 格式:要加载的模块的相对地址 #要加载的模块名称。


注意:子路由中的第一个 path 一定要为空。


本转载自 Think 体验设计公众号。


原文链接:https://mp.weixin.qq.com/s/4bfahysRdH9pVST_UZ4cXg


2020 年 1 月 07 日 15:35197

评论

发布
暂无评论
发现更多内容

英特尔On技术创新峰会

英特尔On技术创新峰会

这里有本Angular修炼秘籍送你(一)-InfoQ