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

最新推荐文章于 2025-06-04 09:20:12 发布

原创

最新推荐文章于 2025-06-04 09:20:12 发布 · 1w 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#Angular

本文总结了使用Angular6和Ng-Zorro进行项目开发的经验，包括UI框架的快速搭建、自定义主题以及面包屑导航的实现。在面包屑导航部分，通过监听Router事件动态生成路由值，但由于Angular版本和RxJS的不兼容问题，最终采用了ngx-breadcrumbs插件，并解决了编译错误。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

项目概述

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

项目选型

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