面包屑导航不显示此父路径和子路径的所有级别

Question

我有下面的痕迹导航组件（来自CoreUI的模板），我有这些路线：

/tasklists
/tasklists/:id/resources
/tasklists/:id/items

其中：id是任务列表ID。

导航按预期工作，但痕迹导航仅显示Home链接和这些路径的最后一级。像这样：

如果正在查看/任务列表：

Home > Tasklists

如果正在查看/ tasklists / 5 / resources：

Home > Resources

而不是显示：

Home > Tasklists > Resources

面包屑和/或路线有什么问题？

import { Component } from '@angular/core';
import { Router, ActivatedRoute, NavigationEnd } from '@angular/router';
import 'rxjs/add/operator/filter';

@Component({
  selector: 'app-breadcrumbs',
  template: `
  <ng-template ngFor let-breadcrumb [ngForOf]="breadcrumbs" let-last = last>
    <li class="breadcrumb-item"
        *ngIf="breadcrumb.label.title&&breadcrumb.url.substring(breadcrumb.url.length-1) == '/'||breadcrumb.label.title&&last"
        [ngClass]="{active: last}">
      <a *ngIf="!last" [routerLink]="breadcrumb.url">{{breadcrumb.label.title}}</a>
      <span *ngIf="last" [routerLink]="breadcrumb.url">{{breadcrumb.label.title}}</span>
    </li>
  </ng-template>`
})
export class BreadcrumbsComponent {
  breadcrumbs: Array<Object>;
  constructor(
    private router: Router,
    private route: ActivatedRoute
  ) {
    this.router.events.filter(event => event instanceof NavigationEnd).subscribe((event) => {
      this.breadcrumbs = [];
      let currentRoute = this.route.root,
      url = '';
      do {
        const childrenRoutes = currentRoute.children;
        currentRoute = null;
        // tslint:disable-next-line:no-shadowed-variable
        childrenRoutes.forEach(route => {
          if (route.outlet === 'primary') {
            const routeSnapshot = route.snapshot;
            url += '/' + routeSnapshot.url.map(segment => segment.path).join('/');
            this.breadcrumbs.push({
              label: route.snapshot.data,
              url:   url
            });
            currentRoute = route;
          }
        });
      } while (currentRoute);
    });
  }
}

app.routing.ts：

export const routes: Routes = [
  {
    path: '',
    redirectTo: '/dashboard',
    pathMatch: 'full',
  },
  {
    path: '',
    component: FullLayoutComponent,
    data: {
      title: 'Início'
    },
    children: [
      {
        path: 'dashboard',
        loadChildren: './dashboard/dashboard.module#DashboardModule',
        canActivate: [AdminGuard]
      },
      {
        path: 'tasklists',
        loadChildren: './tasklists/tasklists.module#TasklistsModule',
        canActivate: [AdminGuard]
      }
    ]
  }
];

任务列表-routing.ts

const routes: Routes = [
  {
    path: '',
    component: TasklistsSearchComponent,
    data: {
      title: 'Tasklists'
    }
  },
  {
    path: ':id',
    children: [
      {
        path: 'resources',
        component: TasklistResourcesComponent,
        data: {
          title: 'Edit tasklist users'
        }
      },
      {
        path: 'items',
        component: TasklistItemsComponent,
        data: {
          title: 'Edit tasklist items'
        }
      }
    ]
  },
  {
    path: 'edit/:id',
    component: TasklistsFormComponent,
    data: {
      title: 'Edit tasklist'
    }
  }
];