自定义面包屑

Question

你能帮我在订单 history/order 详细信息页面上实现自定义面包屑导航吗？默认面包屑仅显示 Home 而不是 Home > Order history 或 Home > Order history > Order #12345

如何根据使用的组件/使用的路由路径定义面包屑？

Answer 1

您可以通过使用 MetaResolvers 并覆盖 BreadcrumbComponent.

来实现对某些页面的面包屑的自定义

MetaResolver 允许您处理特定给定页面类型 and/or 页面模板的元数据，并具有一个名为 resolveBreadcrumbs() 的接口，用于处理给定页面的面包屑结构。您可以观察产品页面的元解析器，例如 here

对于面包屑右侧最远的部分，说它的标题（在您的情况下为订单 #12345），我通过在我的代码中自定义 BreadcrumbComponent 来实现。

custom-breadcrumb.component.ts

export class CustomBreadcrumbComponent extends BreadcrumbComponent implements OnInit {
  
  isOrderDetailPage: boolean;

  constructor(private pageLayoutService: PageLayoutService,
              private orderDetailsService: OrderDetailsService) {

  this.pageLayoutService.page$.subscribe(page => {
  this.isOrderDetailPage = page.pageId === 'order';
})

this.order$ = this.orderDetailsService.getOrderDetails();

}

ngOnInit() {
  super.ngOnInit();
 }
}

custom-breadcrumb.component.html

<div class="custom-breadcrumb">
  <div class="container">
    <nav>
     <span *ngIf="isOrderDetailPage && order$ | async as order"> <a>{{order?.code}}</a></span>
   </nav>
 </div>
</div>

自定义面包屑

Customizing the breadcrumb

hybris

spartacus-storefront