如何在 Angular 建立 Breadcrumb (面包屑)

面包屑 为提供网站里的导航，让使用者容易了解当下所在的位置
刚好也呼应前一天使用 router 的部份

现在位置：首页 / 列表 / 内容

了解 router 架构

Angular 里的 router 架构 通常会命名为 app-routing.module.ts

const routes: Routes = [
  {
    path: '',
    children: [
      {
        path: 'about/:name',
        component: AboutComponent,
        data: {
          breadcrumb: '关於',
        },
      },
      {
        path: 'list',
        component: ListComponent,
        data: {
          breadcrumb: '列表',
        },
        children: [
          {
            path: 'detail',
            component: DetailComponent,
            data: {
              breadcrumb: '内容',
            },
          },
        ],
      },
    ],
  },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
})
export class AppRoutingModule {}

如何建立面包屑

监听路由事件

这里会需要带点 rxjs 的概念

breadcrumbs$: Observable<any>;

constructor(
  private router: Router,
  private activatedRoute: ActivatedRoute,
) {}

ngOnInit(): void {
  this.breadcrumbs$ = this.router.events.pipe(
    filter((event) => event instanceof NavigationEnd),
    distinctUntilChanged(),
    map((event) => {
      let root: ActivatedRoute = this.activatedRoute.root;
      return this.createBreadcrumbs(root);
    })
  );
}

router 每次更改的时後 都会触发许多事件，但我们只需要获取 NavigationEnd 这个事
件就可以了 distinctUntilChanged 只要 网址有更新 才会触发此事件，可以档掉许多连
续触发接下来再将拿到的参数进行操作

建立 Breadcrumb ( 面包屑 )

在 router 里 我们可以得到一些资讯 如... 当前路径当前路径里的参数子节点当前所使用
的组件等.....各种资讯

可以在 Angular ActivatedRoute 得
到更多资讯

概念

每次一次来就检测是否有下一个子节点，若是有的话 就继续再跑一次回圈如此重覆将面
包屑组起来，到达最後一个子节点时 会是一个 null 值，我们就能将先前组好的面包
屑回传出来，这时後会是一个阵列，接着再将它拿到 HTML 上显示！

JS

createBreadcrumbs( route, url: string = '', breadcrumbs = [] ) {
  const children = route.firstChild;

  if( !children ) {
    return breadcrumbs;
  }

  const routeURL: string = children.snapshot.url
    .map(segment => segment.path)
    .join('/');

  const label = children.snapshot.data['breadcrumb'];

  if( !label ) {
    return this.createBreadcrumbs( children, url,  breadcrumbs)
  }

  if ( !routeURL ) {
    url += `/${routeURL}`;
  }

  const breadcrumb = {
    label: label,
    params: children.snapshot.params,
    url: routeURL
  }

  return this.createBreadcrumbs( children, url,  [...breadcrumbs, breadcrumb])
}

先前我们将面包屑建立为一个 Observable，就直接到 html 里 使用 async 订阅再来就
可以撰写出我们想要的面包屑样式罗

HTML

<ul class="breadcrumb">
  <li *ngFor="let breadcrumb of breadcrumbs$ | async; last as isLast">
    <a [routerLink]="breadcrumb?.url" *ngIf="!isLast else last">
      {{ breadcrumb.label }}
      <ng-container *ngIf="breadcrumb?.params.name">
        - {{ breadcrumb?.params.name }}
      </ng-container>
    </a>
    <ng-template #last>
      {{ breadcrumb.label }}
      <ng-container *ngIf="breadcrumb?.params.name">
        - {{ breadcrumb?.params.name }}
      </ng-container>
    </ng-template>
  </li>
</ul>

实作如下： https://stackblitz.com/edit/angular-routing-breadcrumb