Hybris 自定义面包屑
您能帮我在订单历史记录/订单详细信息页面上实现自定义面包屑吗? 默认面包屑仅显示Hybris 自定义面包屑,hybris,spartacus-storefront,Hybris,Spartacus Storefront,您能帮我在订单历史记录/订单详细信息页面上实现自定义面包屑吗? 默认面包屑仅显示Home,而不是Home>订单历史或Home>订单历史>订单35; 12345 如何根据使用的组件/使用的路由路径定义面包屑?您可以通过使用元解析器和覆盖面包屑组件来实现特定页面面包屑的自定义 MetaResolver允许您处理特定给定页面类型和/或页面模板的元数据,并具有一个名为resolveBreadcrumbs()的接口,该接口处理给定页面的breadcrumb结构。例如,您可以观察产品页面的元解析器 对于br
Home
,而不是Home>订单历史
或Home>订单历史>订单35; 12345
如何根据使用的组件/使用的路由路径定义面包屑?您可以通过使用
元解析器和覆盖面包屑组件来实现特定页面面包屑的自定义
MetaResolver允许您处理特定给定页面类型和/或页面模板的元数据,并具有一个名为resolveBreadcrumbs()
的接口,该接口处理给定页面的breadcrumb结构。例如,您可以观察产品页面的元解析器
对于breadcrumb右边最远的部分,可以说是title(在您的例子中是Order#12345),我是通过在代码中自定义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();
}
}
自定义面包屑.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>
{{顺序?.code}
感谢哈维澄清这一点。我确实理解了元分解器的概念,并且已经实现了这一点,但是我想通过routingPageMetaResolver
使用正确的方式提供信息,而不是过滤custom-breadcrumb.component.html中的所有数据