Angular Breadcrumb不能跟踪导航路径

Question

我对Angular非常陌生，我开始在一个网站上工作。我的目标是添加面包屑。我决定寻找一个可行的面包屑并简单地实现它，只关心编辑scss。但是我尝试的每个面包屑都没有用。我最喜欢的代码是我目前正在使用的代码breadcrumb。

当前我的代码是这样：

面包屑成分：

import { BreadCrumb } from './breadcrumb.interface';
import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { ActivatedRoute, NavigationEnd, Router } from '@angular/router';
import { distinctUntilChanged, filter, map } from 'rxjs/operators';

@Component({
  selector: 'app-breadcrumb',
  templateUrl: './breadcrumb.component.html',
  styleUrls: ['./breadcrumb.component.scss'],
  encapsulation: ViewEncapsulation.None
})
export class BreadcrumbComponent implements OnInit {
  breadcrumbs$ = this.router.events.pipe(
    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 : 'Home';
    const path = route.routeConfig ? route.routeConfig.path : '/get-started';
    // In the routeConfig the complete path is not available,
    // so we rebuild it each time
    const nextUrl = `${url}${path}/`;
    const breadcrumb = {
      label: 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;
  }
}

面包屑html：

<ol class="breadcrumb">
  <li *ngFor="let breadcrumb of breadcrumbs$ | async"
      class="breadcrumb-item">
    <a [routerLink]="[breadcrumb.url, breadcrumb.params]">
      {{ breadcrumb.label }}
    </a>
  </li>
</ol>

app-routing.compent：

import { NgModule } from '@angular/core';
import { Routes, RouterModule, PreloadAllModules } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { FaqComponent } from './faq/faq.component';
import { BankDeveloperPortalsComponent } from './bank-developer-portals/bank-developer-portals.component';
import { ContactUsComponent } from './contact-us/contact-us.component';
import { ApiDocumentationComponent } from './api-documentation/api-documentation.component';
import { GetStartedComponent } from './get-started/get-started.component';
import { ApiProductsComponent } from './api-products/api-products.component';
import { SiteMapComponent } from './site-map/site-map.component';
import { PSD2Mid } from './psd2-mid/psd2-mid.component';
import { PSD2Kpi } from './psd2-kpi/psd2-kpi.component';
import { ApiLabComponent } from './api-lab/api-lab.component';

const routes: Routes = [
  {
    path: '',
    component: HomeComponent,
    pathMatch: 'full',
    children: [],
    data: {
      title: 'Open Banking for Business',
      description:
        'Integrate banking data in your systems and make your business flow.',
      heroImage: './assets/images/home/hero.jpg',
      breadcrumb: 'Home'
    }
  }, {
    path: 'account-information',
    component: ApiProductsComponent,
    data: {
      title: 'Account Information',
      description:
        'Access balances and transaction history in real - time and retrieve details.',
      heroImage: './assets/images/account_information/hero.jpg',
      breadcrumb: 'Account Information',
      category: 1
    }
  },
  {
    path: 'payments',
    component: ApiProductsComponent,
    children: [],
    data: {
      title: 'Payments',
      description: 'Dispose payments directly from your systems',
      heroImage: './assets/images/payments/hero.jpg',
      breadcrumb: 'Paymets',
      category: 2
    }
  },
  {
    path: 'tools',
    component: ApiProductsComponent,
    children: [],
    data: {
      title: 'Tools',
      description:
        'Exploit bank utilities to empower additional services such as IBAN verification or ATM availability.',
      heroImage: './assets/images/tools/hero.jpg',
      breadcrumb: 'Tools',
      category: 3
    }
  }, {
    path: 'faq',
    component: FaqComponent,
    children: [],
    data: {
      title: 'Faq',
      description:
        'Integrate banking data in your systems and make your business flow.',
      heroImage: './assets/images/FAQ/hero.jpg',
      breadcrumb: 'FAQ'
    }
  }, {
    path: 'bank_developer_portals',
    component: BankDeveloperPortalsComponent,
    children: [],
    data: {
      title: 'PSD2 TPP Developer Portals',
      description:
        'This page allows access to the Developer Portal of the Group Banks from Third Parties.',
      heroImage: './assets/images/home/hero.jpg',
      breadcrumb: 'Developer Portals'
    }
  },
  {
    path: 'contact_us',
    component: ContactUsComponent,
    children: [],
    data: {
      title: 'Contact Us',
      subtitle: 'Contact Us',
      breadcrumb: 'Contact Us'
    }
  },

  {
    path: 'api_documentation',
    data: {
      title: 'Playground',
      description: 'Your journey with our APIs starts from here. Take a look!',
      heroImage: './assets/images/api_documentation/hero.jpg',
      breadcrumb: 'Playground'
    },
    component: ApiDocumentationComponent
  },
  {
    path: 'get-started',
    component: GetStartedComponent,
    children: [],
    data: {
      title: 'Get Started',
      description: 'How to activate the API service.',
      heroImage: './assets/images/get-started/hero.png',
      breadcrumb: 'Get Started'
    }
  }, {
    path: 'site-map',
    component: SiteMapComponent,
    children: [],
    data: {
      title: 'Site Map',
      description:
        'Site map',
    }
  }, {
    path: 'psd2-mid',
    component: PSD2Mid,
    children: [],
    data: {
      title: 'PSD2 mid interface',
      description:
        'Select psd2 redirect page',
      heroImage: './assets/images/home/hero.jpg'
    }
  }, {
    path: 'psd2-kpi',
    component: PSD2Kpi,
    children: [],
    data: {
      title: 'PSD2 Customer Interface KPI',
      description:
        'Access your PSD2 KPI Interface.',
      heroImage: './assets/images/home/hero.jpg'
    }
  } , {
    path: 'api-lab',
    component: ApiLabComponent,
    children: [],
    data: {
      title: 'Open Banking for business',
      description:
        'Integrate banking data in your systems and carry out operations through API. It’s your turn!',
      heroImage: './assets/images/home/hero.jpg',
      breadcrumb: 'API Lab'
    }
  }
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes, {
      preloadingStrategy: PreloadAllModules
    })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule { }

现在，我的面包屑看起来像这样：

[首页]链接是可单击的，但是却无济于事，当我浏览该站点时，面包屑不会添加我浏览过的页面。真的我不知道该怎么办。我认为问题出在网站的路由中，但我不确定。

Answer 1

您是对的，问题出在网站的路由上，您的路由中应该有一些子节点，因为此面包屑使用子节点来构建面包屑：

  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);
}

有一个例子：app-routing.module.ts

您必须修改您的路线以具有类似以下内容：

const routes: Routes = [
{
    path: '',
    data: {
        breadcrumb: 'home'
    },
    children: [
        {
            path: 'account-information',
            component: ApiProductsComponent,
            data: {
                breadcrumb: 'Account Information'
            },
        },
        {
            path: 'contact me',
            component: ContactComponent,
            data: {
                breadcrumb: 'Contact me'
            },
        },
    ]
}
];