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