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

阅读数:1 2020 年 1 月 7 日 15:35

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

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

初识 angular5

学习 angualr5 的文章很多,推荐博文(复制链接到浏览器打开)
https://segmentfault.com/a/1190000008754631

初学问题

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

直接打开 index.html 页面无法打开,控制台会报如下的错误:
这里有本Angular修炼秘籍送你(一)
是因为 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

评论

发布