npm 包 ng6-breadcrumbs 使用教程

在前端开发中，面包屑导航是非常常见的一种导航方式。在 Angular 6 中，我们可以通过使用一个名为 ng6-breadcrumbs 的 npm 包来轻松地实现面包屑导航功能。

本文将为大家详细介绍 npm 包 ng6-breadcrumbs 的使用方法，包括安装、配置以及基本使用。

安装

我们首先需要安装 ng6-breadcrumbs，可以使用以下命令进行安装：

--- ------- --------------- ------

配置

安装完成后，我们还需要在 AppModule 中进行配置，将 ng6-breadcrumbs 导入并将其添加到 NgModule 的 providers 中：

------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - -------------------- - ---- ------------------

------ - ------------ - ---- ------------------
------ - ------------- - ---- ------------------------
------ - -------------- - ---- --------------------------
------ - ---------------- - ---- ------------------------------

-----------
  -------- - -------------- ------------------------------ --
  ------------- - ------------- -------------- --------------- ---------------- --
  ---------- ---
  ---------- - ------------ -
--
------ ----- --------- - -

基本使用

使用 ng6-breadcrumbs 的步骤如下：

  1. 在需要显示面包屑导航的组件中，定义面包屑项：
------ - ---------- ------ - ---- ----------------
------ - ----------------- - ---- ------------------

------------
  --------- -----------
  ------------ -----------------------
--
------ ----- ------------- ---------- ------ -

  ------------------- ------------------ ------------------ - -

  ---------- -
    ------------------------------------------------------- --------
  -

-
  1. 在 HTML 模板中，使用 ng6-breadcrumbs 的组件进行渲染：
-----------------------------------

这样，我们就完成了一个基本的面包屑导航功能。

高级使用

在默认情况下，ng6-breadcrumbs 使用路由器配置来确定要显示的面包屑导航路径。但是，在某些情况下，我们可能需要手动修改面包屑导航路径。此时，我们可以使用 BreadcrumbService 中的方法。

以下是 BreadcrumbService 支持的几种方法：

  • addFriendlyNameForRoute(routeUrl: string, friendlyName: string): void：为指定路由添加友好名称。
  • changeRoute(routeUrl: string, friendlyName: string): void：更改当前路由的名称和 URL。
  • getBreadcrumbs(): Breadcrumb[]：获取当前面包屑导航路径。
  • generateBreadcrumbs(): Breadcrumb[]：生成面包屑导航路径。

我们可以在组件的 ngOnInit() 方法中使用这些方法来修改面包屑导航路径：

------ - ---------- ------ - ---- ----------------
------ - ------------------ ---------- - ---- ------------------

------------
  --------- -----------
  ------------ -----------------------
--
------ ----- ------------- ---------- ------ -

  ------------------- ------------------ ------------------ - -

  ---------- -
    ------------------------------------------- --- -------
    --- ------------ ------------ - ----------------------------------------
    -------------------------
  -

-

上面的代码将当前路由的 URL 和名称都修改为了 My Home，并且在控制台中输出了面包屑导航路径。

示例代码

下面是一个完整的使用 ng6-breadcrumbs 的示例代码：

app.module.ts：

------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - -------------------- - ---- ------------------

------ - ------------ - ---- ------------------
------ - ------------- - ---- ------------------------
------ - -------------- - ---- --------------------------
------ - ---------------- - ---- ------------------------------

-----------
  -------- - -------------- ------------------------------ --
  ------------- - ------------- -------------- --------------- ---------------- --
  ---------- ---
  ---------- - ------------ -
--
------ ----- --------- - -

home.component.ts：

------ - ---------- ------ - ---- ----------------
------ - ------------------ ---------- - ---- ------------------

------------
  --------- -----------
  ------------ -----------------------
--
------ ----- ------------- ---------- ------ -

  ------------------- ------------------ ------------------ - -

  ---------- -
    ------------------------------------------------------- --------
  -

-

home.component.html：

-------- ---------
-----------------------------------

about.component.ts：

------ - ---------- ------ - ---- ----------------
------ - ----------------- - ---- ------------------

------------
  --------- ------------
  ------------ ------------------------
--
------ ----- -------------- ---------- ------ -

  ------------------- ------------------ ------------------ - -

  ---------- -
    -------------------------------------------------------- ------ -----
  -

-

about.component.html：

--------- -------
-----------------------------------

contact.component.ts：

------ - ---------- ------ - ---- ----------------
------ - ----------------- - ---- ------------------

------------
  --------- --------------
  ------------ --------------------------
--
------ ----- ---------------- ---------- ------ -

  ------------------- ------------------ ------------------ - -

  ---------- -
    ---------------------------------------------------------- -------- -----
  -

-

contact.component.html：

----------- -------
-----------------------------------

app.component.html：

------ ----- -------
-----
  -- ---------------------------
  -- ------------------------- ------
  -- ----------------------------- ------
------
-------------------------------

结语

通过本文的介绍，我们学习了如何在 Angular 6 中使用 ng6-breadcrumbs 包来实现面包屑导航功能。这不仅可以提高我们的开发效率，而且可以为用户提供更好的用户体验。希望本文对你有所帮助！

来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600668f1d9381d61a3540dae

阅读全文

猜你喜欢

  • npm 包 @astro-my/npdynamodb 使用教程

    简介 在前端开发中，我们经常需要使用数据库来存储和管理数据。DynamoDB 是一种 NoSQL 数据库，它可以在 Amazon Web Services 上使用。

    3 年前
  • NPM 包 @fabiospampinato/lockable 使用教程

    简介 @fabiospampinato/lockable 是一个可以加锁的 JavaScript 对象，它可以将一个键值对暂时锁定，这样可以避免在特定的情况下被修改或删除。

    3 年前
  • NPM 包 activable 使用教程

    在前端开发中，我们经常需要为页面的某些元素增加交互效果，比如 hover、click 等。activable 是一个简单易用的 NPM 包，可以帮助我们快速实现这些交互效果。

    3 年前
  • npm 包 graphql-client-generator 使用教程

    GraphQL 是一种由 Facebook 开发的 API 查询语言。它让客户端可以明确地调用出所需要的数据，并且可以将多个数据请求合并到单个请求中，从而大大提高了性能。

    3 年前
  • npm 包"@fabiospampinato/event-emitter" 使用教程

    简介 "@fabiospampinato/event-emitter" 是一个 Node.js 包，实现了标准 EventEmitter 接口，并提供许多附加功能，如命名空间、异步事件处理、触发器后续...

    3 年前
  • npm 包 @fabiospampinato/fifo 使用教程

    npm 包 @fabiospampinato/fifo 使用教程 1. 什么是 @fabiospampinato/fifo @fabiospampinato/fifo 是一个针对 Javascript...

    3 年前
  • 使用教程：npm 包 htmlelement-animation

    使用教程：npm 包 htmlelement-animation 当今，动画已经成为了网站设计必不可少的一部分，而 htmlelement-animation npm 包则是一个简单易用的动画库。

    3 年前
  • npm 包 @dwarvesf/tailwind-plugins 使用教程

    简介 @dwavesf/tailwind-plugins 是一款基于 Tailwind CSS 的插件，允许快速创建常用的 UI 组件，在日常的前端开发中极为实用。

    3 年前
  • npm 包 sparkline.js 使用教程

    随着 Web 界面的日益复杂，需要更强大的界面交互效果去提升用户的体验。在数据可视化的领域中，小而美的 sparkline 图表（小型折线图）是一种非常受欢迎的作法，能够展示紧凑、简洁的数据趋势，适用...

    3 年前
  • NPM 包 rehype-sectionize-headings 使用教程

    前言 在前端开发中，HTML 经常是开发者们需要操作的一项技术。而随着项目规模的不断增大，HTML 中的一些细节问题就变得十分重要。这时候，使用一些帮助我们更好地操作 HTML 的工具就非常必要了。

    3 年前
  • npm 包 @beefoio/file.log 使用教程

    在前端开发中，我们会经常需要将应用程序的日志信息记录到文件中，以便于后续排查问题。而使用 npm 包 @beefoio/file.log 则可以简化这一过程。 安装 在项目根目录下使用 npm 安装 ...

    3 年前
  • npm 包 @kelcon/homebridge-zwave-direct 使用教程

    在前端工程师的日常工作中，引入外部库和第三方依赖非常常见。其中，npm 包是前端开发中使用最多的工具之一。本文将详细介绍一个叫做 @kelcon/homebridge-zwave-direct 的 n...

    3 年前
  • npm包 @psoltys/remarker使用教程

    在前端开发中，我们经常需要创建文档或演示文稿，这时用到一个好的Markdown解析器就非常重要。本篇文章介绍了一个优秀的npm包 @psoltys/remarker，它可以将Markdown格式的文档...

    3 年前
  • npm 包 @unibtc/theia-vue-extension 使用教程

    在前端开发中，Vue.js 是一种广泛使用的 JavaScript 框架之一。在使用 Vue.js 开发应用程序时，很多情况下我们需要使用一些插件来简化开发工作流程。

    3 年前
  • npm 包 codex.editor.warning 使用教程

    在前端开发中，我们经常需要进行代码检查以确保代码质量和可读性。而 codex.editor.warning 正是一个非常强大的 npm 包，它可以帮助我们对代码进行自动化的检查，以提高编程能力和效率。

    3 年前
  • npm 包 react-decent-virtualization 使用教程

    简介 react-decent-virtualization 是一款基于 React 的可视化组件库，适用于大数据量的展示和滚动操作。它基于虚拟化技术实现了高效的渲染和滚动体验，减少了对内存和性能的消...

    3 年前
  • npm 包 code-music 使用教程

    随着 Web 技术的不断发展，前端开发已经不再是简单的 HTML、CSS 和 JavaScript 语言的拼接。现在，前端工程师需要掌握更多的技术和工具，其中 npm 是其中一个必不可少的工具。

    3 年前
  • npm包cpreact使用教程

    什么是cpreact Cpreact是一个React组件库。它提供了一系列优秀的组件，可以快速帮助开发者构建Web应用程序。 cpreact的优点 Cpreact不仅提高了开发效率，还具有以下优点： ...

    3 年前
  • npm 包 @shawn-leo/jsmind 使用教程

    简介 @shawn-leo/jsmind 是一个使用 JavaScript 编写的脑图库，能够以简洁易懂的方式用于前端应用程序的设计。该库提供了一系列可重用的组件和 API，将复杂脑图的创建变得简单，...

    3 年前
  • npm 包 react-svg-font-icons 使用教程

    在现代的前端开发中，图标已经成为了不可或缺的一部分。在很多情况下，我们需要使用图标来设计我们的网站或应用程序。在这个过程中，react-svg-font-icons是一个常用的工具，它提供了一种简单易...

    3 年前

相关推荐

    暂无文章