Question

我想使用以下菜单实现Breadcrumb导航

主页＆gt;解决方案＆gt;结果＆gt;联系

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

  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

这样做：

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 2

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 3

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

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

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

随时检查，开发了一个显示面包屑用法的Angular应用-https://xng-breadcrumb.netlify.com

良好的角度库计划，创建和持续发布documented in this medium article

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

3 个答案: