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