xng-breadcrumb为何无法显示完整面包屑路径？

问题根源 #

你的路由都是平级配置（home、product、cart均为同级路径），xng-breadcrumb默认依据路由的嵌套层级生成面包屑链，平级路由不存在父子关系，因此只会显示当前页面的单一项。

解决办法 #

1. 调整为嵌套路由（推荐方案） #

将路由配置改为带父级的嵌套结构，让面包屑能识别层级关系：

// app.routes.ts
const routes: Routes = [
  { 
    path: '', 
    component: LayoutComponent, // 使用包含<xng-breadcrumb>的布局组件作为父容器
    children: [
      { path: 'home', component: HomeComponent, data: { breadcrumb: '首页' } },
      { path: 'product', component: ProductComponent, data: { breadcrumb: '商品' } },
      { path: 'cart', component: CartComponent, data: { breadcrumb: '购物车' } }
    ]
  }
];

若希望首页作为所有页面的父级面包屑，可调整为：

const routes: Routes = [
  { 
    path: 'home', 
    component: HomeComponent, 
    data: { breadcrumb: '首页' },
    children: [
      { path: 'product', component: ProductComponent, data: { breadcrumb: '商品' } },
      { path: 'cart', component: CartComponent, data: { breadcrumb: '购物车' } }
    ]
  }
];

此时访问/home/product，面包屑会显示首页 > 商品，点击首页即可跳转。

2. 手动声明面包屑层级（适合不愿修改路由的场景） #

若不想调整路由结构，可在每个页面的模板中手动指定面包屑层级：
例如在ProductComponent的HTML中：

<xng-breadcrumb>
  <xng-breadcrumb-item [routerLink]="['/home']">首页</xng-breadcrumb-item>
  <xng-breadcrumb-item>商品</xng-breadcrumb-item>
</xng-breadcrumb>

CartComponent的HTML中：

<xng-breadcrumb>
  <xng-breadcrumb-item [routerLink]="['/home']">首页</xng-breadcrumb-item>
  <xng-breadcrumb-item>购物车</xng-breadcrumb-item>
</xng-breadcrumb>

同时注意，无需单独导入BreadcrumbComponent和BreadcrumbItemDirective，直接导入完整模块更稳妥：

import { XngBreadcrumbModule } from 'xng-breadcrumb';

@NgModule({
  imports: [
    // ...其他模块
    XngBreadcrumbModule
  ]
})
export class AppModule { }

额外提醒 #

• 将<xng-breadcrumb>放置在路由出口的上层组件（如布局组件）中，实现所有页面复用，无需每个页面重复编写。
• 使用路由data配置面包屑时，必须保证路由有正确的嵌套层级，组件才能自动生成完整的面包屑链。

内容的提问来源于stack exchange，提问作者koque