breadcrumb 根据路由_从nz-breadcrumb源码窥探Angular路由

图源Behance | | Rabee Balakrishnan

|| 0 前言

在对接设计师所给的设计图进行页面的过程中，有一块区域使用到了面包屑的设计。而项目用的组件库是ng-zorro-antd，自然而然的，便用到了nz-breadcrumb这个控件。

虽说ng-zorro给出的面包屑控件，根据文档的指示，基本可以解决大部分需求。但是遇到一些深层定制化的需求的时候，就不仅仅是config data那么简单了。

举例一个实际场景：在供应商列表页面，点击供应商名称，跳转至供应商详细，按照面包屑的生成结构，就是供应商列表>供应商详细。但如果要求要求显示供应商列表>:供应商名称。那这个面包屑要动态显示。因为供应商详细是静态唯一的，而:供应商名称是多样可变的。

最后，去ng-zorro开发团队的开发博客和源码地址拜读了一圈，结合发布者订阅模式进行了二次开发，实现重撒面包屑，实现了预期目标。另外解决了页面刷新时，面包屑会消失的问题。

在阅读控件源码以及查找资料的过程中，发现Angular路由机制的门道还蛮深的。想着不如借此机会，琢磨一下控件代码的实现逻辑，进而深化一下自己的知识结构。因此有了本文的记录。

本文中存在的任何错误与不足，欢迎指正，在此提前感谢。

接下来文章会从以下两个点做探讨：

各模块中的Routes，本质上就是一个不断嵌套的路由树。

为什么ng-zorro的文档要指出：懒加载的时候，data属性要绑在父路由？

|| 项目结构

// 这里只列出重要部分：src-->app下的文件结构

|-- app

|-- component 组件

|-- breadcrumb 面包屑组件

|-- component.module.ts

|-- layout

|-- basic-layout 基础渲染页 // /page/*的component都从这里面的进行映射

|-- layout.module.ts

|-- page

|-- agreement-list 协议管理页

|-- vendor-list 供应商列表页

|-- vendor 供应商详细页

|-- page.module.ts

|-- app.component.ts

|-- app.modules.ts

|-- app-routing.module.ts 根路由模块

|| 1 routing-module中的routes，本质上就是不断嵌套的路由树

1.1先来看一下app-routing.module.ts和page.module.ts中的routes

// app-routing.module.ts中的routes

const routes: Routes = [

{path: '', redirectTo: 'page', pathMatch: 'full'},

{path: 'page', loadChildren: () => import('./page/page.module').then(m => m.PageModule), data: {breadcrumb: '供应商列表'}}

{path: '**', redirectTo: 'page'}

]

// page.module.ts中的routes

const routes: Routes = [

// router执行顺序会按照顺序自上而下执行，请尽量扁平化的实现

{path: '', redirectTo: 'vendor-list', pathMatch: 'full'},

// 复用的basic-layout.component可以重复写入

{

// 因为子路由的渲染出口是在父路由的页面上

// 因此当嵌套路由配置完成之后，在嵌套的父级页面上，我们需要定义一个 标签用来指定子路由的渲染出口

path: 'vendor-list', component: BasicLayoutComponent,

children: [

{path: '', component: VendorListComponent},

{path: 'vendor/:type/:id', component: VendorComponent, data: {breadcrumb: '供应商详情'}},

]

}, {

path: 'agreement-l