npm 包 @tjadli/ngx-breadcrumbs 使用教程

本文将介绍 npm 包 @tjadli/ngx-breadcrumbs 的使用教程。@tjadli/ngx-breadcrumbs 是一个 Angular 组件，用于在 Web 页面中显示面包屑导航。它可以帮助前端开发人员更方便地搭建 Web 应用程序，提高用户的使用体验。

配置环境

使用 @tjadli/ngx-breadcrumbs，你需要在你的 Angular 项目中安装它。在开始之前，请确保你的电脑上已经安装了 npm，如果没有，请从 官网 下载安装。

安装 @tjadli/ngx-breadcrumbs

使用以下命令在 Angular 项目中安装 @tjadli/ngx-breadcrumbs。

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

引入 BreadcrumbsModule 并配置路由

在你的 Angular 项目的 AppModule 中引入 BreadcrumbsModule 并配置路由。

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

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

在模板中使用组件

在你的模板中使用 crumb 组件来展示面包屑导航。

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

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

示例

下面是一个具体的示例。我们将创建一个产品列表和产品详情页面，并在页面中展示面包屑导航。

创建项目

使用以下命令创建一个新的 Angular 项目。

-- --- ------

创建产品相关代码

在 src/app 文件夹下创建以下文件。

  • home.component.html - 显示一个链接到产品列表的按钮。
  • product.component.html - 显示产品列表和产品链接。
  • product-detail.component.html - 显示产品详情。

home.component.html

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

product.component.html

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

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

在 product.component.html 的 a 标签中添加了 appBreadCrumb 属性，这是为了将这个链接添加到面包屑导航中。@tjadli/ngx-breadcrumbs 会自动从路由配置中提取面包屑导航信息。

product-detail.component.html

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

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

在路由中设置面包屑导航

在 src/app/app.module.ts 中添加路由配置。

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

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

编写服务和模拟数据

在 src/app 目录下创建一个 products.service.ts 文件，并添加以下代码。

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

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

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

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

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

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

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

-

实现组件

在 src/app/home.component.ts 中添加以下代码。

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

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

在 src/app/product.component.ts 中添加以下代码。

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

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

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

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

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

-

在 src/app/product-detail.component.ts 中添加以下代码。

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

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

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

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

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

-

确认效果

在终端中运行以下命令，以启动应用。

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

在浏览器中打开 http://localhost:4200，你应该能看到页面中的面包屑导航。

总结

本文介绍了如何使用 @tjadli/ngx-breadcrumbs 在 Angular 应用程序中添加面包屑导航。我们创建了一个产品列表和产品详情页面，并且成功地在页面中展示了面包屑导航。最后，希望这篇文章对你有所帮助。

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

阅读全文

猜你喜欢

  • npm包 @intelligentplant/data-core-types 使用教程

    简介 npm包 @intelligentplant/data-core-types 是一个用于处理数据的前端类库。如果想要在前端中使用一些高级的数据处理功能，这个类库可以给你提供很好的支持。

    4 年前
  • npm 包 @nutastic/nf-admin-legacy-assets 使用教程

    简介 @nutastic/nf-admin-legacy-assets 是一个适用于前端的 npm 包。它提供了多种常用的前端资产，包括样式、图标、字体等，可以方便地集成到你的项目中，使你的开发流程更...

    4 年前
  • npm 包 anp-monitor 使用教程

    随着 Web 应用程序的日益复杂，前端监控变得越来越重要。anp-monitor 是一个强大的 npm 包，它可以帮助开发者监控 Web 应用程序中的 JavaScript 错误和性能问题。

    4 年前
  • npm 包 vue-data-component 使用教程

    前言 在前端开发中，数据组件的使用非常频繁。虽然开发者可以手写数据显示及操作的组件，但是随着业务的复杂化，这种方式难以维护及优化。因此，我们需要一些其他的方式来快速、高效地创建和管理数据组件。

    4 年前
  • npm 包 dialog-shift-sdk 使用教程

    前言 随着人工智能技术的应用不断扩展，机器人智能对话系统越来越受到关注。其中，Dialogshift 是一家提供智能对话技术的公司，其开发的 Dialogshift SDK 可以快速集成到现有的网站或...

    4 年前
  • npm 包 ant3 使用教程

    如果你正在使用 React 构建应用程序，那么你肯定听说过 Ant Design，这是热门的开源 UI 库，拥有丰富的组件和设计语言。Ant Design 3（也称为 Antd 3）是 Ant Des...

    4 年前
  • npm包super-ly使用教程

    前言 随着前端技术的发展，npm包已经成为前端开发中不可或缺的一部分，而我今天要介绍的就是一个强大而且实用的npm包：super-ly。 super-ly提供了许多有用的功能来帮助前端工程师在他们的项...

    4 年前
  • npm 包 iview-demo-ruby 使用教程

    随着前端技术的发展，前端工程化已经成为行业趋势。npm 作为前端项目的包管理工具，其在前端开发中已经成为必不可少的工具之一。而 iView-demo-ruby 是针对 iView 框架开发的一个 np...

    4 年前
  • NPM 包 xeditor_animate 使用教程

    在前端开发中，动画效果是非常关键的一部分，可以大大提升页面的交互体验和用户满意度。为了方便开发人员实现各种动画效果，市面上出现了很多优秀的动画库，其中 xeditor_animate 就是一款非常不错...

    4 年前
  • npm 包 storysource 使用教程

    在前端开发过程中，我们经常会用到 Storybook 来进行组件的开发和调试。而使用 Storybook 进行组件开发的关键在于如何编写好的 Storybook 配置文件以及 Storybook 中的...

    4 年前
  • npm 包 @shackijj/wdio-static-server-service 使用教程

    前言 对于前端开发人员而言，使用静态服务器来部署和展示自己的项目是非常常见的。然而，如果每次需要手动启动静态服务器并保持运行状态，这将会是一项非常耗时、繁琐的工作。

    4 年前
  • npm 包 @bachdgvn/vue-auto-complete 使用教程

    前言 在今天的 Web 开发中，前端领域的工具和技术变化很快。在这种环境下，npm 作为一个包管理器，为我们提供了很多很好的工具来加快我们的开发速度。其中，@bachdgvn/vue-auto-com...

    4 年前
  • npm 包 @allardyce/reveal 使用教程

    介绍 @allardyce/reveal 是一个方便快捷的创建幻灯片的工具包。它基于 reveal.js 的技术，通过简单的命令和配置来创建优美的幻灯片。 安装 通过 npm 安装 @allardyc...

    4 年前
  • 使用 `npm` 包 `react-native-share-edoc2` 让你的移动端应用分享起来更简单

    在移动端应用开发中，分享功能是必不可少的。然而，要实现一个完整的分享功能不仅需要考虑微信、QQ、Facebook 等不同平台的分享方式，还需要考虑分享内容的不同类型和格式，例如分享图片、视频、链接等。

    4 年前
  • npm 包 create-react-ionic-blank 使用教程

    前言 在前端开发中，框架和库的选择是关键的一环。Ionic 是一个非常流行的移动端 UI 框架，而 React 又是一个快速发展的前端技术栈。在将这两者结合使用时，常常需要实现一些模板和基础配置。

    4 年前
  • npm 包 @thijs-development/emojipicker 使用教程

    简介 @thijs-development/emojipicker 是一个开源的 npm 包，用于在前端应用中实现表情选择器的功能。它基于 React 开发，可自定义样式和自定义表情资源，同时支持 h...

    4 年前
  • npm 包 generator-nod 使用教程

    前言 当你需要创建一个 Node.js 项目时，从零开始搭建环境可以非常繁琐。而 generator-nod 则能够帮助你快速生成一个简单的 Node.js 应用程序，同时还具备自动化配置和测试的功能...

    4 年前
  • npm 包 @helpscout/wedux 使用教程

    介绍 @helpscout/wedux 是一个基于 Redux 的状态管理库，专门用于 React 应用程序。它可以帮助开发者更轻松地管理应用的状态，提高代码的可读性和可维护性。

    4 年前
  • npm 包 graphql-schema-modules 使用教程

    GraphQL 是一种基于类型系统的查询语言和规范，用于API的设计和客户端和服务器之间的数据交互。而其中的 schema 是 GraphQL 定义的数据结构的精华所在，它描述了所有可查询的数据的类型...

    4 年前
  • npm 包 tscomp 使用教程

    概述 在前端开发中，使用 TypeScript 开发代码已经成为越来越普遍的选择，随之而来的是需要使用相应的编译工具将 TypeScript 代码转换成 JavaScript 代码。

    4 年前

相关推荐

    暂无文章