自定义面包屑

问题描述

您能帮我在订单历史/订单详情页面上实现自定义面包屑导航吗？默认面包屑仅显示 select delete_entry(v.id) from generate_series(1,280) as v(id); 而不是 select delete_entry(the_column) from the_table; 或 ./src/styles/base.scss (./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-6-1!./node_modules/postcss-loader/src??postcss!./node_modules/resolve-url-loader??ref--5-oneOf-6-3!./node_modules/sass-loader/dist/cjs.js??ref--5-oneOf-6-4!./src/styles/base.scss) on line 1 of node_modules/test-off/dist/assets/scss/functions/_index.scss from line 1 of node_modules/test-off/dist/assets/scss/base.scss from line 1 of /Users/John/MyAPP/NextBest/src/styles/base.scss >> @import '~@henris/utils';

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

解决方法

您可以通过使用 MetaResolvers 和覆盖 BreadcrumbComponent 来实现特定页面的面包屑自定义。

MetaResolver 允许您处理特定给定页面类型和/或页面模板的元数据，并具有一个名为 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>

hybris spartacus-storefront