基于导航历史而不是路线路径的角度面包屑 [英] Angular Breadcrumb based on navigation history instead of route path

问题描述

有没有办法实现基于导航历史的面包屑而不是基于正常路线路径的面包屑.

Is there a way to implement navigation history based breadcrumb instead of normal route path based breadcrumb.

示例路线 :主页 - HChild1 - HChild1.1首页 - HChild2 - HChild2.1

example Route : Home - HChild1 - HChild1.1 Home - HChild2 - HChild2.1

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

If user navigates to HChild2.1 from Home page breadcrumb should be Home | HChild2.1

代替首页 |HChild2 |HChild2.1

instead of Home | HChild2 | HChild2.1

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

Then if user navigates to HChild1.1 from HChild2.1 then breadcrumb should be Home | HChild2.1 | HChild1.1

代替首页 |HChild1.1 |HChild1.1

instead of Home | HChild1.1 | HChild1.1

我所拥有的是基于普通路由路径的面包屑，它不能满足我的目的，因为我只能导航到 paranet 组件，而不能导航到前一个组件.

what I have is normal route path based breadcrumb which doesn't serve my purpose as I can only navigate to the paranet component but not to the previous component.

谢谢

推荐答案

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

Use breadcrumb component to populate last route in navigation end route.

路由必须有面包屑数据

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

这是我制作的面包屑组件.

Here is the breadcrumb component I made.

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;
  }
}

这篇关于基于导航历史而不是路线路径的角度面包屑的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！