router - Angular 2 Dynamic Breadcrumbs -
i need breadcrumbs
here example routes config
routes = [ {path: '', redirectto: 'home', pathmatch: 'full'}, {path: 'home', ..., data: { breadcrumb: 'home'}}, {path: 'about', ..., data: { breadcrumb: 'about'}}, {path: 'github', ..., data: { breadcrumb: 'github'}, { path: 'category/:id', component: categorycomponent }, ]
in bread crumbs component try use extract breadcrumbs data activatedroute
ngoninit() { // subscribe navigationend event this.router.events.filter((event) => event instanceof navigationend).subscribe(() => { // set breadcrumbs const root: activatedroute = this.activatedroute.root; this.breadcrumbs = this.getbreadcrumbs(root); }); }
after render comonentns template
<ul class="breadcrumb"> <li><a routerlink="" routerlinkactive="active"><i class="fa fa-home position-left"></i> Главная</a></li> <ng-container *ngfor="let breadcrumb of breadcrumbs"> <li routerlinkactive="active"> <a [routerlink]="[breadcrumb.url, breadcrumb.params]"> {{ breadcrumb.label }}</a> </li> </ng-container> </ul>
all fine dont know how can pass data value component category/:id
route make in human readable "mobile phones"
Comments
Post a Comment