Angular 基于导航历史而非路线路径的角度面包屑

是否有一种方法可以实现基于导航历史的面包屑，而不是基于常规路径的面包屑

范例 路线： 主页-HChild1-HChild1.1 Home-HChild2-HChild2.1

如果用户从主页导航到HChild2.1，则应使用面包屑 首页| HChild2.1

而不是 首页| HChild2 | HChild2.1

然后，如果用户从HChild2.1导航到HChild1.1，则面包屑应该是 首页| HChild2.1 | HChild1.1

而不是 首页| HChild1.1 | HChild1.1

我所拥有的是基于普通路径的面包屑，这不符合我的目的，因为我只能导航到paranet组件，而不能导航到上一个组件

---

谢谢

使用面包屑组件填充导航结束路线中的最后一条路线

路线必须有面包屑数据

//Home route
{ 
  path: '',
  component: HomeComponent,
  data: {breadcrumb:'Home'},
}

这是我制作的面包屑组件

export interface BreadCrumb {
  label: string;
  url: string;
};

@Component({
  selector: 'breadcrumb',
  template: `<span *ngFor="let breadcrumb of breadcrumbs" >
    <a [routerLink]="breadcrumb.url">
      {{ breadcrumb.label }}
    </a>|
  </span>`
})
export class BreadCrumbComponent {
  private history = [];
  breadcrumbs: BreadCrumb[] = [];
  constructor(
    private router: Router,
    private activatedRoute: ActivatedRoute,
  ) { }

  public ngOnInit(): void {
    this.router.events
      .pipe(filter(event => event instanceof NavigationEnd), distinctUntilChanged(),map(() => {
        return this.buildBreadCrumb(this.activatedRoute.root)
      }
      ))
      .subscribe(event => {
        this.breadcrumbs.push(event);
        console.log(this.breadcrumbs)
      });
  }
  buildBreadCrumb(route: ActivatedRoute, url: string = ''): BreadCrumb {
    const label = route.routeConfig ? route.routeConfig.data['breadcrumb'] : 'Home';
    const path = route.routeConfig ? `/${route.routeConfig.path}` : '';

    const nextUrl = `${url}${path}`;
    const breadcrumb = {
      label: label,
      url: nextUrl
    };

    if (route.firstChild) {
      return this.buildBreadCrumb(route.firstChild, nextUrl);
    }
    return breadcrumb;
  }
}

导出接口面包屑{
标签：字符串；
url:string；
};
@组成部分({
选择器：“面包屑”，
模板：`
{{breadcrumb.label}
|
`
})
出口级面包屑组件{
私人历史=[]；
面包屑：面包屑[]=[]；
建造师(
专用路由器：路由器，
私有激活路由：激活路由，
) { }
public ngOnInit（）：void{
这是路由器事件
.pipe（筛选器（事件=>NavigationEnd的事件实例）、distinctUntilChanged（）、映射（（）=>{
返回此.buildBreadCrumb（this.activatedRoute.root）
}
))
.订阅（事件=>{
这个.breadcrumbs.push（事件）；
console.log（this.breadcrumbs）
});
}
buildBreadCrumb（路由：ActivatedRoute，url:string=''）：BreadCrumb{
const label=route.routeConfig？route.routeConfig.data['breadcrumb']：'Home'；
const path=route.routeConfig？`/${route.routeConfig.path}`:''；
const nextUrl=`${url}${path}`；
常量面包屑={
标签：标签，
网址：nextUrl
};
if（路线第一个孩子）{
返回此.buildBreadCrumb（route.firstChild，nextur）；
}
返回面包屑；
}
}