今年 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)直接进行路由嵌套如下:
(左右/上下滑动可查看全部代码)
2)懒加载模式:
主路由:(左右/上下滑动可查看全部代码)
子路由全部用 loadChildren 加载,到这个路由的时候在加载路由下的模块及组件。
loadChildren 格式:要加载的模块的相对地址 #要加载的模块名称。
注意:子路由中的第一个 path 一定要为空。
本转载自 Think 体验设计公众号。
原文链接:https://mp.weixin.qq.com/s/4bfahysRdH9pVST_UZ4cXg
评论