Breadcumbs in Angular5

Question

Breadcumbs in Angular5

Navigation

#1 by (0 votes)

1

I want to put the breadcrumbs, the problem is that it only returns the final route where I am, not the steps that I have been following.

I followed the tutorial of link

Although I have modified some things:

In App-routing-modules.ts

const routes: Routes = [
  {
    path: '',
    component: ProjectListComponent,

    data: {
      breadcrumb: 'Home'
    }
  },

  {
    path: 'About',
    component: AboutComponent,

    data: {
      breadcrumb: 'About'
    }
  },

On the breadcrumb.component.ts

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

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

@Component({
  selector: 'app-breadcrumb',
  templateUrl: './breadcrumb.component.html',
  styleUrls: ['./breadcrumb.component.scss'],
  encapsulation: ViewEncapsulation.None
})
export class BreadcrumbComponent implements OnInit {
  breadcrumbs$ = this.router.events
    .filter(event => event instanceof NavigationEnd)
    .distinctUntilChanged()
    .map(event => this.buildBreadCrumb(this.activatedRoute.root));
  // Build your breadcrumb starting with the root route of your current activated route

  constructor(private activatedRoute: ActivatedRoute, private router: Router) {}

  ngOnInit() {}

  buildBreadCrumb(route: ActivatedRoute, url: string = '', breadcrumbs: Array<BreadCrumb> = []): Array<BreadCrumb> {
    // If no routeConfig is avalailable we are on the root path
    const label = route.routeConfig && route.routeConfig.data['breadcrumb'];
    const path = route.routeConfig ? route.routeConfig.path : '';
    // In the routeConfig the complete path is not available,
    // so we rebuild it each time
    const nextUrl = '${url}${path}/';
    const breadcrumb = {
      label,
      url: nextUrl
    };
    const newBreadcrumbs = [...breadcrumbs, breadcrumb];
    if (route.firstChild) {
      // If we are not on our current path yet,
      // there will be more children to look after, to build our breadcumb
      return this.buildBreadCrumb(route.firstChild, nextUrl, newBreadcrumbs);
    }
    return newBreadcrumbs;
  }
}

Finally in the html:

<ol class="breadcrumb">
  <li class="breadcrumb-item" *ngFor="let breadcrumb of breadcrumbs$ | async">
    <a [routerLink]="[breadcrumb.url]">
      {{ breadcrumb.label }}
    </a>

  </li>
</ol>

The problem is that if I'm in the About that comes from the home. just shows About and does not paint the / home / About

angular

asked by EduBw 16.04.2018 в 09:10

source

1 answer

SOAP-ERROR: Encoding: object has no 'any' property How to know when the src property of an image changes its value?

score 0 · Accepted Answer

If you look at your navigation routes:

const routes: Routes = [
  {
    path: '',
    component: ProjectListComponent,

    data: {
      breadcrumb: 'Home'
    }
  },
  {
    path: 'About',
    component: AboutComponent,

    data: {
      breadcrumb: 'About'
    }
  },
   ...
]

You have two totally independent routes, there is no relationship between them. The component that generates the breadcrump what it does is look at the data of the component to load in the route and the data of its parents .

Therefore, you could do something like the following:

const routes: Routes = [
  {
    path: '', //Ruta raíz
    component: ProjectListComponent,
    data: {
      breadcrumb: 'Home'
    },
    children: [
      { 
        path: 'About',
        component: AboutComponent ,
        data: {
          breadcrumb: 'About'
        }
      }
    ]
  }
]

In this way, you nest paths and components: they are all children of "/" (because all their paths are "/" + something).