如何在 Angular 7 中实现面包屑导航

Question

我正在尝试在基于 Angular 7 的应用程序中实现面包屑。

下面提到了包含面包屑组件的根组件的 HTML 模板（面包屑在路由器出口之外）

<app-layout>
 <div>
  <app-breadcrumb></app-breadcrumb>
  <router-outlet></router-outlet>
 </div>
</app-layout>

面包屑组件 ts 文件

ngOnInit() {
 this.router.events.pipe(filter(event => event instanceof NavigationEnd)).subscribe((router) => {
  let snapshot = this.router.routerState.snapshot;
  this.breadcrumbs = [];
  let url = snapshot.url;
  let routeData: Data = snapshot.root.data;
  let label = routeData['breadcrumb'];
  let params = snapshot.root.params;
  this.breadcrumbs.push({
    url: url,
    label: label,
    params: params
  });
});

面包屑组件 html 文件

<nav aria-label='breadcrumb'>
  <ol class='breadcrumb'>
    <li *ngFor='let breadcrumb of breadcrumbs'>
      <a [routerLink]='[breadcrumb.url, breadcrumb.params]' routerLinkActive='active'>{{ breadcrumb.label }}</a>
    </li>
  </ol>
</nav>  

路由定义如下

const routes: Routes = [
 { path: 'folders', component: FolderManagementComponent, data: { breadcrumb: 'Home' } },
 { path: 'folders/list-documents', component: ListDocumentsComponent, data: { breadcrumb: 'Documents' } },
 { path: '', redirectTo: '/folders', pathMatch: 'full', data: { breadcrumb: 'Home' }}
];

但我没有得到数据和参数

Answer 1

使用以下代码更新面包屑组件 ts 文件中的路由器订阅逻辑。

  ngOnInit() {

    this.router.events
      .pipe(filter(event => event instanceof NavigationEnd))
      .pipe(map(() => this.activatedRoute))
      .pipe(map((route) => {
        while (route.firstChild) { route = route.firstChild; }
        return route;
      }))
      .pipe(filter(route => route.outlet === PRIMARY_OUTLET))
      .subscribe(route => {

        let snapshot = this.router.routerState.snapshot;
        this.breadcrumbs = [];
        let url = snapshot.url;
        let routeData = route.snapshot.data;

        console.log(routeData);
        let label = routeData['breadcrumb'];
        let params = snapshot.root.params;

        this.breadcrumbs.push({
          url: url,
          label: label,
          params: params
        });

      });

}

工作 stackblitz 链接：https ://stackblitz.com/edit/breadcrumb-in-angular-7

最近我实现了ng-dynamic-breadcrumb、ng7-dynamic-breadcrumb、ng7-bootstrap-breadcrumb和ng7-mat-breadcrumb Angular 面包屑模块​​。请检查这些模块，我希望这对动态面包屑有帮助。