侧边栏菜单的angular 2/4面包屑

Question

我想为我的侧边栏菜单实现breadcrumb。我的菜单是Menu1 Menu2 subMenu1 subMenu2。。。

点击Menu2后，它就会展开，然后点击subMenu1，我想将breadcrumb显示为主页> Menu2 > subMenu1，我想实现它-点击主页，它应该重定向到仪表板页面。Menu2不应该是可点击的(没有任何内容，只需展开菜单)。应该可以单击subMenu2。

Answer 1

我知道这是一个古老的问题，但如果有人也有类似的问题，我想为Angular 6+提供一个解决方案。这并不是一个优雅的解决方案，但您应该能够使用css和ng6-breadcrumbs实现这一点。

注意：在此解决方案中，subMenu2将不可单击，因为您应该无法导航到已经显示的站点页面。

如何在Angular 6+中禁用面包屑

第一阶段-准备项目：

1 -使用路由创建新项目：

  ng new breadcrumb-demo --routing

2 -安装引导程序：

   npm install jquery --save
   npm install bootstrap --save 
   npm install ngx-bootstrap --save

angular.json 3构建-在中包含 ("architect“-> "build")：

    "styles": [ 
        "node_modules/bootstrap/dist/css/bootstrap.min.css", 
        "src/styles.css" 
    ]


    "scripts": [ 
        "node_modules/jquery/dist/jquery.js",
        "node_modules/bootstrap/dist/js/bootstrap.min.js"
    ]

4 -安装ng6-breadcrumbs：

npm install --save ng6-breadcrumbs

在您的app.module.ts中包含ng6- 5

import {BreadcrumbsModule} from "ng6-breadcrumbs";

注意：修复程序将在导入部分中添加BreadcrumbsModule。

阶段II -实施：

在添加所有需要的组件+起始页面和错误页面后，在app-routing.module.ts中设置1

const routes: Routes = [
{
    path: '', redirectTo: '/home', pathMatch: 'full'
},
{
    path: 'home',
    component: StartPageComponent,
    data: {
      breadcrumb: 'Home'//<--Breadcrumb label
    },
    children: [
    {
          path: 'menu1',
          component: Menu1Component,
          pathMatch: 'full',
          data: {
              breadcrumb: 'Menu1'//<--Breadcrumb label
          },
    },
    {
        path: 'menu2',
        component: Menu2Component,
        data: {
            breadcrumb: 'Menu2'//<--Breadcrumb label
        },
        children: [
        {
            path: '',
            redirectTo: '/home/menu2/submenu1',
            pathMatch: 'full',
        },
        {
            path: 'submenu1',
            component: Submenu1Component,
            data: {
                breadcrumb: 'Submenu1'//<--Breadcrumb label
            },
        },
        {
            path: 'submenu2',
            component: Submenu2Component,
            data: {
                breadcrumb: 'Submenu2'//<--Breadcrumb label
            },
        }
      ]
    },
  ]
},
{
    path: '**',
    component: ErrorPageComponent
}
];

HTML2-添加到在中具有子路由标记的每个组件：

<router-outlet></router-outlet>

app.component.html，3-在您想要添加面包屑的位置添加以下内容：

<breadcrumb id="breadcrumbComponent" [allowBootstrap]="true"></breadcrumb>

4 -修改全局style.css文件，您将在其中禁用'Menu2‘breadcrumb：

/* All not activated breadcrumbs style*/
#breadcrumbComponent .breadcrumb-item a{
  color: green;
}
/* Activated breadcrumbs style*/
#breadcrumbComponent .breadcrumb-item.active {
  color: blue
}
/* Breadcrumb with specific link */
#breadcrumbComponent .breadcrumb-item a[href="/home/menu2"]{
  color: red !important;
  pointer-events: none;
}

完成:)

现在您应该在页面上看到breadcrumb组件，并且在输入链接/ menu2 /menu2/submenu1之后，submenu1的breadcrumb 'Menu2‘应该是红色的，并且不可点击;)