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

Popular posts from this blog

ubuntu - PHP script to find files of certain extensions in a directory, returns populated array when run in browser, but empty array when run from terminal -

php - How can i create a user dashboard -

javascript - How to detect toggling of the fullscreen-toolbar in jQuery Mobile? -