1. 简介
ng2-breadcrumb-fixed 是一个 Angular2+ 的面包屑导航组件库，可以方便地为每个页面增加面包屑导航。在多层级嵌套路由的情况下，它还能自动识别当前页面所处的路由，并根据路由层级生成相应的面包屑导航。
2. 安装
使用 npm 包管理器安装：
npm install ng2-breadcrumb-fixed --save
3. 使用
3.1 引入模块
在 app.module.ts 中导入 Ng2BreadcrumbModule.forRoot()：
-- -------------------- ---- -------
------ - ------------- - ---- ----------------------------
------ - -------- - ---- ----------------
------ - ------------------- - ---- -----------------------
------ - ------------ - ---- ------------------
-----------
------------- -
------------
--
-------- -
--------------
-----------------------------
--
---------- ---
---------- --------------
--
------ ----- --------- - -3.2 在 HTML 中使用
<ng2-breadcrumb></ng2-breadcrumb>
3.3 在路由中设置标签
在应用的路由配置文件（一般是 app-routing.module.ts）中，以以下格式配置路由：
-- -------------------- ---- ------- ------ - -------- - ---- ---------------- ------ - ------------- ------ - ---- ------------------ ------ - ------------- - ---- ------------------------ ------ - -------------- - ---- -------------------------- ------ - ---------------- - ---- ------------------------------ ----- ------- ------ - - - ----- ------- ---------- -------------- ----- - ----------- ------ - -- - ----- -------- ---------- --------------- ----- - ----------- ------- - -- - ----- ---------- ---------- ----------------- ----- - ----------- --------- - - -- ----------- -------- ------------------------------- -------- -------------- -- ------ ----- ---------------- - -
路由的 data 属性中，增加了 breadcrumb 标签，并设置了相应的值。这是为了让 ng2-breadcrumb-fixed 可以根据路由信息自动生成面包屑导航。
3.4 设置全局样式
为了让导航变得好看，我们一般会在全局样式表中添加以下 CSS 样式：
li+li::before {
content: ' / ';
}这样每个面包屑导航之间就会用斜杠隔开，看起来更加美观。
4. 示例
你可以在 Github 上查看我的一个示例项目：https://github.com/johnsmith-demo/ng2-breadcrumb-fixed-demo
5. 总结
使用 ng2-breadcrumb-fixed 可以轻松地为 Angular2+ 应用增加面包屑导航。按照上述步骤进行配置，你可以自由地控制导航的样式和层级，让你的应用更加美观和友好。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005605a81e8991b448de7eb