gmostert / ng2-breadcrumb

This is an angular 2 component that creates a breadcrumb trail. It hooks into the angular2/router, to dynamically build up the crumb trail once a component is routed to.
MIT License
102 stars 81 forks source link

Hide any path not allowed in the breadcrumb #61

Open lepabloski opened 7 years ago

lepabloski commented 7 years ago

Hi, i´m using the breadcrumb and when i give a random route, like 'dsadsad' and the page is using a path like { path: '**', component: PagenotfoundComponent } the breadcrumb shows dsadsad, we want to hide any path like this. i have use `import { Component, OnInit } from '@angular/core'; import {BreadcrumbService} from 'ng2-breadcrumb/ng2-breadcrumb';

@Component({ selector: 'app-pagenotfound', templateUrl: './pagenotfound.component.html', styleUrls: ['./pagenotfound.component.css'], providers: [BreadcrumbService] }) export class PagenotfoundComponent implements OnInit {

constructor( private breadcrumbService: BreadcrumbService ) { }

ngOnInit() { this.breadcrumbService.hideRoute('/a-zA-Z09'); }

}` in the app.modules we import the module like this

import {Ng2BreadcrumbModule} from 'ng2-breadcrumb/ng2-breadcrumb';

any ideas? the path still showing.

Thanks.

beaverusiv commented 7 years ago

Have you tried .* as the regex? The other way might be to use ActivatedRouteSnaphot to specifically target the 404 path (so as not to pollute the breadcrumbs for subsequent navigation)

plastikaweb commented 7 years ago

I've tried a little "dirty" solution that works:

export class AnyComponent implements OnInit {
  hideBreadcrumb = false;

  constructor(private breadcrumbService: BreadcrumbService,
              private router: Router,
              private activatedRoute: ActivatedRoute) {
  }
  ngOnInit() {
    this.router.events
      .filter(event => event instanceof NavigationEnd)
      .map((e) => this.activatedRoute)
      .map(route => {
        while (route.firstChild) {
          route = route.firstChild;
        }
        return route.component;
      })
      .subscribe((componentClass: any) => {
        this.hideBreadcrumb = ((new componentClass()) instanceof NotFoundComponent);
      });
  }
}

And in the template: <breadcrumb [style.display]="hideBreadcrumb ? 'none' : 'block'"></breadcrumb>

Where NotFoundComponent is the component for lost paths in Routes array: { path: '**', component: NotFoundComponent }