1. 什么是 ng5-breadcrumb
ng5-breadcrumb 是一个 Angular 5 的面包屑导航插件，用于生成动态的面包屑导航，让用户清晰地了解自己所在的页面结构及路径。ng5-breadcrumb 简单易用，根据路由模块自动生成面包屑导航，并且支持自定义面包屑导航的模板。
2. 安装 ng5-breadcrumb
使用 npm 包管理工具安装 ng5-breadcrumb：
npm install ng5-breadcrumb --save
3. 配置 ng5-breadcrumb
首先，在 app.module.ts 中导入 BreadcrumbModule：
-- -------------------- ---- -------
------ - ------------- - ---- ----------------------------
------ - -------- - ---- ----------------
------ - ---------------- - ---- ----------------- -- -- ----------------
-----------
------------- -
------------
--
-------- -
--------------
-------------------------- -- -- ----------------
--
---------- ---
---------- --------------
--
------ ----- --------- - -然后，在每个路由模块中配置面包屑导航的路径和名称：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------- ------ - ---- ------------------
------ - ------------- - ---- -------------------
----- ------- ------ - -
- ----- --- ---------- ------- ----------- ------ --
-
----- -------
---------- --------------
----- -
----------- ---- -- ----------
-
--
-
----- ----------
------------- -----------------------------------------
----- -
----------- ---- -- ----------
-
-
--
-----------
-------- -------------------------------
-------- --------------
--
------ ----- ---------------- - -4. 使用 ng5-breadcrumb
在模板中使用 ng5-breadcrumb：
<ol [breadcrumb]="breadcrumb"></ol>
在组件中定义 breadcrumb：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ----------------- - ---- -----------------
------------
--------- -----------
------------ -----------------------
---------- -----------------------
--
------ ----- ------------ -
----------- ----- - ---
------------------- ------------------ ------------------ -
--------------------------------------------------------------- ------ -- -
--------------- - -------
---
-
-5. 自定义面包屑导航模板
ng5-breadcrumb 支持自定义面包屑导航模板，只需要在模板中自定义 ol 标签的内容即可。例如：
<ol class="breadcrumb">
<li><a routerLink="/">首页</a></li>
<li><a routerLink="/product">产品</a></li>
<li><a routerLink="{{breadcrumb[2].url}}">{{breadcrumb[2].label}}</a></li>
</ol>6. 示例代码
app.module.ts：
-- -------------------- ---- -------
------ - ------------- - ---- ----------------------------
------ - -------- - ---- ----------------
------ - ---------------- - ---- -----------------
------ - ---------------- - ---- -----------------------
------ - ------------ - ---- ------------------
------ - ------------- - ---- -------------------
-----------
------------- -
-------------
-------------
--
-------- -
--------------
-----------------
--------------------------
--
---------- ---
---------- --------------
--
------ ----- --------- - -app-routing.module.ts：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------- ------ - ---- ------------------
------ - ------------- - ---- -------------------
----- ------- ------ - -
- ----- --- ---------- ------- ----------- ------ --
-
----- -------
---------- --------------
----- -
----------- ----
-
--
-
----- ----------
------------- -----------------------------------------
----- -
----------- ----
-
-
--
-----------
-------- -------------------------------
-------- --------------
--
------ ----- ---------------- - -app.component.html：
<ol [breadcrumb]="breadcrumb"></ol>
app.component.ts：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ----------------- - ---- -----------------
------------
--------- -----------
------------ -----------------------
---------- -----------------------
--
------ ----- ------------ -
----------- ----- - ---
------------------- ------------------ ------------------ -
--------------------------------------------------------------- ------ -- -
--------------- - -------
---
-
-home.component.ts：
-- -------------------- ---- -------
------ - ---------- ------ - ---- ----------------
------ - ----------------- - ---- -----------------
------------
--------- -----------
--------- --------- ---------------
--
------ ----- ------------- ---------- ------ -
------------------- ------------------ ------------------ - -
---------- -
------------------------------------------------------- ------ -- --------
-
-product.module.ts：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------ - ---- ------------------
------ - ------------- ------ - ---- ------------------
------ - ---------------- - ---- ----------------------
----- ------- ------ - -
- ----- --- ---------- ------- ----------- ------ --
-
----- -------
---------- -----------------
----- -
----------- ------
-
--
-
----- -------------
---------- -----------------
----- -
----------- ------
-
-
--
-----------
-------- -
-------------
-----------------------------
--
------------- ------------------
--
------ ----- ------------- - -product.component.html：
-- -------------------- ---- ------- --- ------------------- ------ -------------------------- ------ --------------------------------- ------ ------------------------------------------------------------------- --- ------------------------ ------------------------------------------------------------------- ----- ----------- -------------- -------------------------------
product.component.ts：
-- -------------------- ---- -------
------ - ---------- ------ - ---- ----------------
------ - -------------- - ---- ------------------
------ - ----------------- - ---- -----------------
------------
--------- --------------
--------- ------------ ----------------
--
------ ----- ---------------- ---------- ------ -
------------------- --------------- --------------- ------- ------------------ ------------------ - -
---------- -
----- ---- - ----------------------------------
-- ----------------- -
--------------------------------------------------------------------------------------------------------------- -----------------
-
-
-7. 小结
ng5-breadcrumb 是一个非常实用的面包屑导航插件，方便用户了解自己所在的页面结构及路径。本文介绍了如何安装、配置和使用 ng5-breadcrumb，同时也讲解了如何自定义面包屑导航模板。希望本文对大家有所帮助，也希望大家在实际项目中能够灵活运用 ng5-breadcrumb 插件。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056d1781e8991b448e6e3e