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

How to add call back for multiple parameters? #76

Open GlennVanSchil opened 7 years ago

GlennVanSchil commented 7 years ago

I Have the following routes

/projects/ /projects/:projectId /projects/:projectId/fields /projects/:projectId/fields/:fieldId

I've successfully replaced the projectId with a project name in the breadcrumb

Projects / Project Name Projects / Project Name / Fields Projects / Project Name / Fields / Field ID

by doing

import {Component, OnInit, ViewEncapsulation} from '@angular/core';
import {BreadcrumbService} from 'ng2-breadcrumb/bundles/components/breadcrumbService';

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.css'],
  encapsulation: ViewEncapsulation.None,
})
export class DashboardComponent implements OnInit {

  /**
   * Regex for UUID: [0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}
   * @param {BreadcrumbService} breadcrumbService
   */
  constructor(private breadcrumbService: BreadcrumbService) {
    breadcrumbService.addFriendlyNameForRoute('/projects', 'Projects');
    breadcrumbService.addCallbackForRouteRegex('^/projects/[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$', this.getNameForProject);
    breadcrumbService.addFriendlyNameForRouteRegex('^/projects/[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/fields', 'Fields');
  }

  ngOnInit() {
  }

  getNameForProject(projectId: string): string {
    console.log('getNameForProject', projectId);
    return 'Project Name';
  }

}

But I'm unable to replace the fieldId as well. My goal is to create a breadcrumb like this:

Project / Project Name / Fields / Field Name

Do you have any documentation about this?