ng2-auto-breadcrumb 是一个 Angular 2+ 应用程序中的面包屑导航类库，可以自动为路由路径渲染面包屑导航。它允许为路由在全局和局部设置面包屑，以及通过自动创建面包屑 as-you-go 来为路由创建面包屑。
安装
使用 npm 组件包管理器安装：
npm install ng2-auto-breadcrumb --save
使用
- 导入面包屑模块：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------------- - ---- ----------------------
-----------
-------- -
------------------------------
--
--
------ ----- --------- --- 在路由上设置
breadcrumb数据：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------- ------ - ---- ------------------
------ - ------------- - ---- ------------------------
----- ------- ------ - -
-
----- ---
----------- -------
---------- -------
--
-
----- -------
---------- --------------
----- -
----------- -------
--
--
-
----- ----------
------------- -- -- ------------------------------------------- -- -------------------
----- -
----------- ----------
--
--
--
-----------
-------- -------------------------------
-------- ---------------
--
------ ----- ---------------- --- 添加
breadcrumb显示标记：
将 <breadcrumb></breadcrumb> 添加到要渲染的模板文件。
<breadcrumb></breadcrumb> <router-outlet></router-outlet>
Api 集成
1. Route Data
使用 data 属性定义路由的 breadcrumb 属性。
{
path: 'contact',
loadChildren: () => import('./contact/contact.module').then(mod => mod.ContactModule),
data: {
breadcrumb: 'Contact',
},
}2. Global Configuration
添加 Ng2BreadcrumbModule 并调用 forRoot() 方法来设置全局级别的默认值：
-- -------------------- ---- -------
-----------
-------- -
--------------
-------------
------------------------------
-----------------
--
---------- ---------------
--
------ ----- --------- --3. Template
添加标记以显示生成的面包屑：
<breadcrumb></breadcrumb> <router-outlet></router-outlet>
示例代码
下面是一个使用 ng2-auto-breadcrumb 的示例代码：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- --------------
--------- -
----------- ---------
---------- -- -- ----- ---- ----- --- ------------
--
--
------ ----- ---------------- --
------ ----- ------ - -
- ----- --- ---------- ------------- --
- ----- ------- ---------- -------------- ----- - ----------- ------ - --
- ----- ---------- ---------- ----------------- ----- - ----------- --------- - --
- ----- -------- ---------- --------------- ----- - ----------- ------ --- - --
--通过上述配置，该面包屑导航类库 ng2-auto-breadcrumb 将自动为生成的路由设置面包屑导航。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055eb181e8991b448dc4f0