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

Question

我想为侧边栏菜单实现面包屑。我的菜单是 菜单1 菜单2   subMenu1   subMenu2 。 。

单击Menu2后，它会展开然后单击subMenu1我想将breadcrumb显示为Home＆gt; Menu2＆gt; subMenu1 我想实现它 - 点击Home它应该重定向到仪表板页面。 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

3 -在 angular.json 中加入引导程序（“建筑师” -> “构建” ）：

    "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-面包屑：

npm install --save ng6-breadcrumbs

5 -在您的 app.module.ts 中包括ng6-面包屑：

import {BreadcrumbsModule} from "ng6-breadcrumbs";

注意：请记住在导入部分添加BreadcrumbsModule。

第二阶段-实施：

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

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

2 -添加到每个具有HTML子代路由标签的组件：

<router-outlet></router-outlet>

3 -在 app.component.html 中，在需要面包屑的位置添加：

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

4 -修改全局 style.css 文件，您将在其中禁用“菜单2”面包屑：

/* 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;
}

完成：）

现在，您应该在页面上看到面包屑组件，并且输入链接/ home / menu2 / submenu1后，menu2面包屑“ Menu2”应该为红色且不可点击;）