npm 包 @ngx-kit/ui-breadcrumbs 使用教程
介绍
@ngx-kit/ui-breadcrumbs 是一个 Angular Breadcrumb 组件库，提供了基于 Angular 的可配置、可扩展、可定制的面包屑导航组件。该组件库支持自定义面包屑导航节点的样式和内容，并且可以非常方便地与 Angular 的路由进行集成。
另外，@ngx-kit/ui-breadcrumbs 还提供了丰富的 API，可以在任意 Angular 组件中使用，以满足开发者的不同需求。
安装
首先，需要先安装 Angular CLI 和 @ngx-kit/ui-breadcrumbs：
npm install -g @angular/cli npm install --save @ngx-kit/ui-breadcrumbs
如果你使用的是 yarn，可以使用以下命令来安装：
yarn global add @angular/cli yarn add @ngx-kit/ui-breadcrumbs
使用
- 首先，需要在你的 AppModule 中导入 NgxKitUIModule。
-- -------------------- ---- ------- ------ - -------- - ---- ---------------- ------ - ------------- - ---- ---------------------------- ------ - -------------- - ---- -------------- ----------- -------- --------------- ---------------- ------------- --------------- ---------- --------------- -- ------ ----- --------- --
- 其次，需要在你的路由配置中添加 breadcrumb 配置。
-- -------------------- ---- -------
------ - ------ - ---- ------------------
------ - ---------- - ---- --------------------------
----- ------- ------ - -
-
----- -------
---------- --------------
----- -
----------- -------
--
--
-
----- -----------
---------- --------------------
----- -
----------- ------- -- ----- --------------------
--
-------- -
----- -------------
--
--
--其中，breadcrumb 配置可以是一个固定的字符串，也可以是一个函数，函数的返回值是 breadcrumb 的文本内容。使用 data 属性添加 breadcrumb 配置后，@ngx-kit/ui-breadcrumbs 会自动根据路由的层级关系，生成对应的面包屑导航节点。
- 最后，在需要显示面包屑导航的组件中，添加 ngx-breadcrumbs 组件即可。
<ngx-breadcrumbs></ngx-breadcrumbs>
定制
@ngx-kit/ui-breadcrumbs 组件库支持通过输入属性的方式，实现面包屑导航节点的样式和内容的定制。以下是一些常用的输入属性：
homeTemplate：面包屑导航的首页节点模板。separatorTemplate：面包屑导航的节点分隔符模板。itemTemplate：面包屑导航的节点模板。collapse：缩略面包屑导航节点的配置。
另外，@ngx-kit/ui-breadcrumbs 还支持通过组件 inheritance 的方式，实现面包屑导航节点的样式和内容的定制，同时还可以继承和扩展组件库的行为。
示例代码
以下是一个完整的示例代码，演示了如何使用和定制 @ngx-kit/ui-breadcrumbs。
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - -------------- - ---- --------------
------ - ------------- ------ - ---- ------------------
------ - ------------ - ---- ------------------
------ - ------------- - ---- -------------------
------ - ------------- - ---- -------------------
------ - ------------------- - ---- --------------------------
------ - ------------ - ---- ------------------
----- ------- ------ - -
-
----- ---
---------- --------------
----- -
----------- -------
--
--
-
----- -------
---------- --------------
----- -
----------- -------
--
--
-
----- -----------
---------- --------------------
----- -
----------- ------- -- ----- --------------------
--
-------- -
----- -------------
--
--
--
-----------
-------- --------------- --------------- ------------------------------
------------- -------------- -------------- -------------- ---------------------
---------- ---------------
---------- ---------------
--
------ ----- --------- --
------------
--------- -----------
--------- -
-----------------
------------ ---------------
-- -------------------------------- --------------- ------
--------------
------------------
-------------------------------
--
--
------ ----- ------------ --结束语
@ngx-kit/ui-breadcrumbs 提供了一种非常方便的 Angular Breadcrumb 组件库，可以帮助开发者更快速、更高效地开发面包屑导航组件，并支持可定制、可扩展的特性，非常值得一试。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671d630d0927023822c40