Angular 13中使用xng-breadcrumb如何前置添加父级面包屑项

xng-breadcrumb 没有内置类似angular-breadcrumb那种在路由data里直接声明parent的配置项，但完全支持添加独立的自定义面包屑项，不用硬拼文本，加出来的项和路由自动生成的样式、交互逻辑完全一致。

推荐方案：用官方BreadcrumbService插入自定义项，不用改现有路由 #

这个方案零侵入，不需要调整你现有的路由配置，直接在account/:id对应的入口组件里操作就行：

1. 先注入服务

   import { BreadcrumbService } from 'xng-breadcrumb';
   constructor(private breadcrumbService: BreadcrumbService) {}
   

2. 组件初始化时，往面包屑列表最前面插入你要的accounts父级项：

   ngOnInit() {
     // 第二个参数0代表插入到面包屑数组的第0位，也就是账号编号项的前一级
     this.breadcrumbService.set('@accountsCrumb', {
       label: 'accounts',
       routeLink: '/accounts' // 换成你自己的账号列表页实际路径
     }, 0);
   
     // 你原来给account别名赋值账号编号的逻辑完全不用动
     // 比如拿到账号详情后调用 this.breadcrumbService.set('@account', '1234-56-789')
   }
   

这种方式加的是独立的面包屑节点，会自动套用你全局配的面包屑样式、点击跳转、自定义模板，和路由自动生成的项没有任何区别，最终渲染出来就是你要的效果：

You are here: accounts / 1234-56-789 / page 1

可选方案：调整路由结构自动生成父级 #

如果你不介意改动现有URL规则，也可以直接把账号相关路由嵌套在accounts路由下，让框架自动识别父级面包屑：

{
  path: 'accounts',
  data: { breadcrumb: 'accounts' },
  children: [
    {
      path: ':id',
      pathMatch: 'prefix',
      // 原来的/account/:id路径会变成/accounts/:id，需要同步修改项目里所有相关跳转
      children: [
        {
          path: '', pathMatch: 'full', redirectTo: 'page1',
          data: { breadcrumb: { alias: 'account' } }
        },
        { path: 'page1', data: { breadcrumb: 'page 1' } },
        { path: 'page2', data: { breadcrumb: 'page 2' } }
      ]
    }
  ]
}

这个方案不需要写额外业务代码，但会改现有路由路径，如果项目里已经有大量跳转写死了原/account/:id路径，改造成本很高，优先用第一种服务插入的方案。

内容的提问来源于stack exchange，提问作者Kees de Bruin