项目开发个人总结,开发单位项目实施总结

项目概述 开发一个多功能平台，具有展示产品，申请服务开通，申请记录查看等功能，与公司内部系统相连接，初步功能较为单一，后期可能会扩展新功能。 项目选型 由于上一个项目选择的Abp框架，配合使用的是angular6的前端框架，这次我还是继续选择angular6作为前端开发框架，UI框架，选择了ng-zorro，阿里维护的开源项目，ant design设计原则，用起来应该还是比较顺手的。 过程

1.搭建UI框架
ng-zorro官网，“快速上手”中有粗略的步骤，我走个捷径，选择最简单的命令执行，自动初始化所有配置。

$ ng add ng-zorro-antd

2.选择布局
根据设计图稿，选择了“顶部-侧边布局-通栏”，这一布局样式，最为接近，但需要去掉顶部。

3.自定义主题
ng-zorro自带的主题中，没有本次项目需要的主题颜色，所以需要自定义主题，幸好ng-zorro有教程引导。

4.项目实战
首先将布局写到文件中，由于开始的时候觉得整个的页面布局也就如此，因此，将布局全部写到app.component中，页面的nz-content放上router-outlet配合路由，就可以实现页面跳转，后面发现这个做法还是有些欠妥，所以后面加了个root.component为入口，页面布局依然保留在了app.component中。

• subnav 1
  • option1
  • option2
  • option3
  • option4
• subnav 2
  • option5
  • option6
  • option7
  • option8
• subnav 3
  • option9
  • option10
  • option11
  • option12

Home List App Content 面包屑导航（breadcrumb）

这儿谈谈面包屑导航nz-breadcrumb的问题，ng-zorro的文档中的实现比较简单，是固定的几个值，但其实实际情况中，肯定是要配合，路由动态生成的。参考了一下外网大神的方法，学习了一下做法，链接在此
大概的意思就是需要监听Router的NavigationEnd事件，然后通过ActivateRoute的Snapshot，取到之前的路由的值，最后拼接成数组，然后在界面上*ngFor渲染这个数组就能达到我们常见的效果。
但实际上，我参照这个做法没有达到效果，其中的问题我还没排查出来，但是我看不少人都能正确使用，应该是我自己的问题，留着后面有时间再研究研究，我这里选用了另外一个面包屑导航的插件，ngx-breadcrumbs，github地址在此，
但同样的用的时候也是出现了问题，在最后ng-serve的时候，出现了一堆rxjs的错误

....ERROR in ./node_modules/ngx-breadcrumbs/ngx-breadcrumbs/ngx-breadcrumbs.es5.jsModule not found: Error: Can't resolve 'rxjs/BehaviorSubject' in '/Users/marvinheilemann/Documents/Projects/M8FINDER/www/application/client/node_modules/ngx-breadcrumbs/ngx-breadcrumbs'....

这个问题是由于这个插件是基于angular4开发的，也就是说rxjs版本在6以下，而我的这个项目是基于angular6 + rxjs6开发的，rxjs有了不少改动，因此，这个地方编译会报错，解决方案就是安装rxjs-compat包。

npm install rxjs-compat@6 --save

这样使用起来就没有什么问题了，但后期由于项目的重新设计问题，放弃了面包屑导航，但至少还是知道的用法。