title: Breadcrumb navigation does not display all levels for this parent and children routes
body: <p>I have the breadcrumb component below (from CoreUI's template) and I have these routes:</p>
  
  <pre><code>/tasklists
  /tasklists/:id/resources
  /tasklists/:id/items
  </code></pre>
  
  <p>Where :id is the tasklist ID.</p>
  
  <p>The navigation is working as expected, however the breadcrumb navigation is displaying the Home link and the last level for these routes only. Like this:</p>
  
  <p>If currently viewing /tasklists:</p>
  
  <pre><code>Home &gt; Tasklists
  </code></pre>
  
  <p>If currently viewing /tasklists/5/resources:</p>
  
  <pre><code>Home &gt; Resources
  </code></pre>
  
  <p>instead of showing:</p>
  
  <pre><code>Home &gt; Tasklists &gt; Resources
  </code></pre>
  
  <p>What is wrong with the Breadcrumb and/or the Routes?</p>
  
  <pre><code>import { Component } from '@angular/core';
  import { Router, ActivatedRoute, NavigationEnd } from '@angular/router';
  import 'rxjs/add/operator/filter';
  
  @Component({
    selector: 'app-breadcrumbs',
    template: `
    &lt;ng-template ngFor let-breadcrumb [ngForOf]="breadcrumbs" let-last = last&gt;
      &lt;li class="breadcrumb-item"
          *ngIf="breadcrumb.label.title&amp;&amp;breadcrumb.url.substring(breadcrumb.url.length-1) == '/'||breadcrumb.label.title&amp;&amp;last"
          [ngClass]="{active: last}"&gt;
        &lt;a *ngIf="!last" [routerLink]="breadcrumb.url"&gt;{{breadcrumb.label.title}}&lt;/a&gt;
        &lt;span *ngIf="last" [routerLink]="breadcrumb.url"&gt;{{breadcrumb.label.title}}&lt;/span&gt;
      &lt;/li&gt;
    &lt;/ng-template&gt;`
  })
  export class BreadcrumbsComponent {
    breadcrumbs: Array&lt;Object&gt;;
    constructor(
      private router: Router,
      private route: ActivatedRoute
    ) {
      this.router.events.filter(event =&gt; event instanceof NavigationEnd).subscribe((event) =&gt; {
        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 =&gt; {
            if (route.outlet === 'primary') {
              const routeSnapshot = route.snapshot;
              url += '/' + routeSnapshot.url.map(segment =&gt; segment.path).join('/');
              this.breadcrumbs.push({
                label: route.snapshot.data,
                url:   url
              });
              currentRoute = route;
            }
          });
        } while (currentRoute);
      });
    }
  }
  </code></pre>
  
  <p>app.routing.ts:</p>
  
  <pre><code>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]
        }
      ]
    }
  ];
  </code></pre>
  
  <p>tasklists-routing.ts</p>
  
  <pre><code>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'
      }
    }
  ];
  </code></pre>