Angular6 + Ng-Zorro项目开发总结（一）

项目概述

开发一个多功能平台，具有展示产品，申请服务开通，申请记录查看等功能，与公司内部系统相连接，初步功能较为单一，
后期可能会扩展新功能。

项目选型

由于上一个项目选择的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中。

    <nz-layout class="layout">
      <nz-layout>
        <nz-sider [nzWidth]="200" style="background:#fff">
          <ul nz-menu [nzMode]="'inline'" style="height:100%">
            <li nz-submenu>
              <span title><i class="anticon anticon-user">i>subnav 1span>
              <ul>
                <li nz-menu-item>option1li>
                <li nz-menu-item>option2li>
                <li nz-menu-item>option3li>
                <li nz-menu-item>option4li>
              ul>
            li>
            <li nz-submenu>
              <span title><i class="anticon anticon-laptop">i>subnav 2span>
              <ul>
                <li nz-menu-item>option5li>
                <li nz-menu-item>option6li>
                <li nz-menu-item>option7li>
                <li nz-menu-item>option8li>
              ul>
            li>
            <li nz-submenu>
              <span title><i class="anticon anticon-notification">i>subnav 3span>
              <ul>
                <li nz-menu-item>option9li>
                <li nz-menu-item>option10li>
                <li nz-menu-item>option11li>
                <li nz-menu-item>option12li>
              ul>
            li>
          ul>
        nz-sider>
        <nz-layout style="padding:0 24px 24px">
          <nz-breadcrumb style="margin:16px 0;">
            <nz-breadcrumb-item>Homenz-breadcrumb-item>
            <nz-breadcrumb-item>Listnz-breadcrumb-item>
            <nz-breadcrumb-item>Appnz-breadcrumb-item>
          nz-breadcrumb>
          <nz-content style="background:#fff; padding: 24px; min-height: 280px;">Contentnz-content>
        nz-layout>
      nz-layout>
    nz-layout>

面包屑导航（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.js
Module 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

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