为什么 xng-breadcrumb 不显示面包屑痕迹？

Question

我的 app.routes 中有以下内容：

{ path: 'home', component: HomeComponent, data: { breadcrumb: 'Home' } },
{ path: 'product', component: ProductComponent, data: { breadcrumb: 'Product' } },
{ path: 'cart', component: CartComponent, data: { breadcrumb: 'Cart' } },

我在 app.component 中的导入：

imports: [
BreadcrumbComponent,
BreadcrumbItemDirective

],

app.component.html 包含：

 <xng-breadcrumb></xng-breadcrumb>

当我从一个页面导航到另一页面时，仅显示当前页面的面包屑，没有显示其他面包屑，因此我无法使用面包屑进行导航。

文档：xng-breadcrumb 文档

Answer 1

它应该只显示当前路线，如果路线是另一层深度，它将显示面包屑。首页 > 个人资料 > 用户，因此嵌套路由只会显示面包屑，不会显示页面访问历史记录。

import { Component } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import { provideRouter, RouterModule } from '@angular/router';
import { BreadcrumbComponent, BreadcrumbItemDirective } from 'xng-breadcrumb';

@Component({
  selector: 'app-root',
  imports: [RouterModule, BreadcrumbComponent, BreadcrumbItemDirective],
  standalone: true,
  template: `
  <a routerLink="home">home</a> | 
  <a routerLink="home/product">home - product</a> | 
  <a routerLink="home/cart">home - cart</a> | 
  
  <a routerLink="product">product</a> | 
  
  <a routerLink="cart">cart</a>
  <br/>
  <br/>
    <router-outlet/>
  <br/>
  <br/>
    <xng-breadcrumb></xng-breadcrumb>
  `,
})
export class App {
  name = 'Angular';
}

@Component({
  selector: 'app-home',
  standalone: true,
  imports: [RouterModule],
  template: `
    Home
    <router-outlet/>
  `,
})
export class HomeComponent {
  name = 'Angular';
}

@Component({
  selector: 'app-cart',
  standalone: true,
  template: `
    CartComponent
  `,
})
export class CartComponent {
  name = 'Angular';
}

@Component({
  selector: 'app-product',
  standalone: true,
  template: `
    ProductComponent
  `,
})
export class ProductComponent {
  name = 'Angular';
}

bootstrapApplication(App, {
  providers: [
    provideRouter([
      {
        path: 'home',
        component: HomeComponent,
        data: { breadcrumb: 'Home' },
        children: [
          {
            path: 'product',
            component: ProductComponent,
            data: { breadcrumb: 'Product' },
          },
          {
            path: 'cart',
            component: CartComponent,
            data: { breadcrumb: 'Cart' },
          },
        ],
      },
      {
        path: 'product',
        component: ProductComponent,
        data: { breadcrumb: 'Product' },
      },
      { path: 'cart', component: CartComponent, data: { breadcrumb: 'Cart' } },
    ]),
  ],
});

Stackblitz 演示