如何在 Angular 4 中实现面包屑导航

Question

我想用下面的菜单实现面包屑导航

首页 > 解决方案 > 结果 > 联系方式

目前，我正在使用以下路由代码

  import { NgModule } from '@angular/core';
    import { RouterModule, Routes } from '@angular/router';

    import { SolutionComponent } from "./solutions.component";
    import { ResultComponent } from "./result/result.component";
    import { ContactComponent } from './contact/contact.component';


    const routes: Routes = [
        {
            path: 'home/solutions',
            component: SolutionsComponent
        },
        {
            path: 'home/solutions/result',
            component:ResultComponent
        },
        {
            path: 'home/solutions/result/contact',
            component: ContactComponent
        }
];
    @NgModule({
      imports: [RouterModule.forRoot(routes)],
      exports: [RouterModule]
    })
    export class AppRoutingModule { }

任何人都可以建议示例 plunker 在 Angular 4 中实现面包屑导航

我创建了一个部分工作的 plunker https://plnkr.co/edit/iGLJ06zRVYWDYedAtsDW?p=preview

谢谢

Answer 1

setBreadcrumb() {
    this.router.events.subscribe((val) => {
        this.displayBreadcrumbList = [];
        if (location.pathname !== '') {
            this.route = location.pathname;
            this.masterBreadcrumbList = this.route.split('/');
            this.masterBreadcrumbList = this.masterBreadcrumbList.slice(1, this.masterBreadcrumbList.length);
            for (let i = 0; i < this.masterBreadcrumbList.length; i++) {
                if (i !== 0) {
                    this.initialUrl = this.displayBreadcrumbList[i - 1];
                } else {
                    this.initialUrl = '/';
                }
                const breadCrumbObj = {
                    name: this.masterBreadcrumbList[i],
                    url: this.initialUrl + this.masterBreadcrumbList[i],
                    id: i
                };
                this.displayBreadcrumbList.push(breadCrumbObj);
            }
        } else {
            this.route = 'Home';
        }
    });
}
<ol class="breadcrumb">
        <li class="breadcrumb-item"><a class="breadcrumb-text" href="#">Home</a></li>
        <li *ngFor="let breadLink of displayBreadcrumbList" class="breadcrumb-item active" aria-current="page">
            <a href="javascript:void(0)" [routerLink]="breadLink.url" class="breadcrumb-text">{{breadLink.name }}</a></li>
    </ol>

Answer 2

这样做：

const routes: Routes = [
        {
            path: 'home/solutions',
            component: SolutionsComponent,
            data: { breadcrumb: 'sample breadcrumb' },
        },
        {
            path: 'home/solutions/result',
            component:ResultComponent,
            data: { breadcrumb: 'sample breadcrumb' },
        },
        {
            path: 'home/solutions/result/contact',
            component: ContactComponent,
            data: { breadcrumb: 'sample breadcrumb' },
        }
];

Answer 3

任何面包屑解决方案都必须处理 -

1. 在路由中定义面包屑的声明式方法
2. 通过不同标签更新任何路由的动态异步方式
3. 在面包屑中跳过特定路线的方法

我创建了一个 Angular 库来处理所有这些问题，称为 xng-breadcrumbs - https://github.com/udayvunnam/xng-breadcrumb

请随意查看，开发的一个 Angular 应用程序显示了面包屑的使用 - https://xng-breadcrumb.netlify.com

Angular 库规划、创建、持续发布很好documented in this medium article