1

Quiero poner las migas de pan , el problema es que solo me devuelve la ruta final en donde estoy, no los pasos que he ido siguiendo.

He seguido el tutorial de https://medium.com/@bo.vandersteene/angular-5-breadcrumb-c225fd9df5cf

Aunque he modificado algunas cosas:

En App-routing-modules.ts

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

    data: {
      breadcrumb: 'Home'
    }
  },

  {
    path: 'About',
    component: AboutComponent,

    data: {
      breadcrumb: 'About'
    }
  },

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

Finalmente en el html:

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

  </li>
</ol>

El problema es que si estoy en el About que viene del home. solo muestra About y no pinta el /home/About

3
  • Has roto la jerarquía de las rutas y por eso no te pone Home: About un es un hijo suyo. Commented el 16 abr. 2018 a las 7:45
  • Sé que tú lo tienes claro, pero llevo apenas 2 semanas, hago lo que veo por internet, podrías ser más claro por favor ?
    – EduBw
    Commented el 16 abr. 2018 a las 8:36
  • Claro, es que estaba muy liado a primera hora como para ponerme con ello... ahora te explico Commented el 16 abr. 2018 a las 9:55

1 respuesta 1

0

Si nos fijamos en tus rutas de navegación:

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

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

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

Tienes dos rutas totalmente independientes, no hay relación entre ellas. El componente que genera el breadcrump lo que hace es mirar los datos del componente a cargar en la ruta y los datos de sus padres.

Por tanto, podrías hacer algo como lo siguiente:

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

De este modo, anidas las rutas y los componentes: todos son hijos de "/" (porque todos sus paths son "/" + algo).

2
  • y para mostrarlo en el html ,ya lo hace el código que tengo ?? Gracias por la explicación.
    – EduBw
    Commented el 16 abr. 2018 a las 10:10
  • No he usado ese componente, pero tiene pinta de que es así Commented el 16 abr. 2018 a las 10:19

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.