优雅地实现 Angular 路由的面包屑导航

前言

在开发 Angular 前端工程时，一些页面需要用到面包屑导航，使得用户可以方便快捷的进行导航。在这篇文章中，我们将介绍如何优雅地实现 Angular 路由的面包屑导航。

Angular 前端路由的使用

Angular 是一种面向组件编程的框架，可以很方便的创建页面组件。而在使用 Angular 进行路由跳转时，通常会使用到 RouterModule 模块。例如：

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

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

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

此时，我们就可以通过 [routerLink] 属性来实现路由跳转了：

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

实现面包屑导航

要实现面包屑导航，需要获取到当前路由的相关信息。可以使用 ActivatedRoute 服务来获取路由信息：

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

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

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

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

在组件中，我们使用 activatedRoute.url 订阅路由信息，然后解析出路径中的各个部分，将它们封装为面包屑导航。

在 HTML 中，只需要使用 ngFor 指令来遍历面包屑导航数组即可：

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

总结

本文中，我们使用 ActivatedRoute 服务来获取路由信息，然后将其封装为面包屑导航。通过这种方式，我们可以优雅地实现 Angular 路由的面包屑导航。

示例代码：https://stackblitz.com/edit/angular-breadcrumb-navigation

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

阅读全文

猜你喜欢

  • 如何在 ECMAScript 2021 中正确使用 Object.fromEntries() 方法

    简介 ECMAScript 2021 中增加了 Object.fromEntries() 方法。它接受一个数组作为参数，该数组包含键值对的数组，然后将它们转换成一个对象。

    1 年前
  • 在 Jest 中使用 sinon.js 进行 mock 测试的方法分享

    在 Jest 中使用 sinon.js 进行 mock 测试的方法分享 随着前端技术的不断发展，越来越多的人开始注重测试，以确保代码的质量和稳定性。在前端领域中，Jest 是一款广受欢迎的测试框架。

    1 年前
  • Vue.js 中如何使用 Vuex 实现表单数据共享

    在 Vue.js 开发中，有时需要将表单数据共享到不同的组件中，以便于统一管理和处理。Vuex 是一个状态管理模式，可以在 Vue.js 中实现数据共享和状态管理。

    1 年前
  • Node.js 下使用 Sequelize ORM 操作 PostgreSQL 数据库

    前言 在现代 Web 应用程序开发过程中，管理数据非常重要。使用关系型数据库（如 PostgreSQL）管理数据是一种可行的方法，因为关系型数据库具有强大的查询功能和 ACID（原子性、一致性、隔离性...

    1 年前
  • Serverless 如何使用自定义运行时？

    Serverless 是指一种云计算的模式，用户不需要考虑服务器的管理和维护，只需要关注应用程序的编写和运行。Serverless 通常使用函数计算服务，用户上传自己编写的代码函数，服务商会自动运行并...

    1 年前
  • # 不同版本 Babel 的差异及如何升级

    不同版本 Babel 的差异及如何升级 Babel 是一个 JavaScript 编译器，它能够将新的 JavaScript 语法转换为旧版本的 JavaScript，以便在旧的浏览器或环境中执行。

    1 年前
  • PM2 与 Forever: 比较这两款流行的 Node.js 进程管理工具

    Node.js 是一种非常强大的开源跨平台 JavaScript 运行环境，可以使我们更便捷地使用 JavaScript 进行服务器端开发。然而，当我们需要使用 Node.js 运行大型 Web 应用...

    1 年前
  • Koa2 中使用 Elasticsearch 进行数据搜索及全文检索

    介绍 Elasticsearch 是一个开源的，基于 Lucene 的搜索引擎。它提供了一个分布式、多租户的全文搜索引擎，可以用于存储、搜索和分析大量的文本数据。 在前端开发中，我们经常需要对数据进行...

    1 年前
  • React 中如何动态加载组件

    React 中如何动态加载组件 当你在开发复杂的 Web 应用程序时，你通常需要动态地加载组件。这可以帮助你减少页面加载时间，同时提高应用程序的性能。 在 React 中，你可以使用以下几种方式来动态...

    1 年前
  • PWA 中 console.log 的使用技巧

    在 PWA (Progressive Web App) 的开发过程中，console.log 是一种非常有用的调试和代码分析工具。它可以帮助开发者快速定位和解决问题，提高代码质量和开发效率。

    1 年前
  • Socket.io 如何实现对客户端连接身份验证？

    前言 在实际的应用场景中，经常需要对客户端进行身份验证，以确保连接的安全性和可信性。而在使用 Socket.io 进行客户端与服务端通讯时，如何实现对客户端连接进行身份验证呢？本文将会详细介绍 Soc...

    1 年前
  • Custom Elements 如何实现滚动加载

    前言 在前端的开发中，有许多场景需要使用滚动加载的技术来实现，如无限滚动、分页等功能。本篇文章将介绍如何使用 Custom Elements 来实现滚动加载功能，其中 Custom Elements ...

    1 年前
  • .NET Core 中实现 RESTful API 的最佳实践

    在今天的 Web 开发中，RESTful API 已经成为了主流的 API 架构设计方式。经过多年的发展，RESTful API 也已经成为了开发者们的首选之一。然而，在 .NET Core 中实现一...

    1 年前
  • MongoDB 中如何使用 $size 进行数组匹配查询

    在 MongoDB 中，$size 运算符可以用来在数组类型的字段中匹配指定长度的数组。如何使用 $size 进行数组匹配查询呢？下面将为大家介绍。 什么是 $size 运算符 $size 是 Mon...

    1 年前
  • ECMAScript 2017 新增的标准库：Object.keys() 的局限性与解决方案

    简介 ECMAScript 2017 是 JavaScript 语言的最新标准版本，它增加了许多新的特性和标准库。其中，Object.keys() 是非常实用和重要的一个库。

    1 年前
  • Chrome 中 Flexbox 布局布局错误的排查方法

    Flexbox（弹性盒子布局）是一种非常流行的前端布局方式，然而，当我们在 Chrome 中使用 Flexbox 布局时，有时会出现布局错误，这篇文章将为大家介绍如何排查解决这些问题。

    1 年前
  • 提高 JVM 性能优化效率

    在前端中，JVM 的性能是一个重要的衡量标准。优化 JVM 性能可以提高应用程序的响应速度、稳定性和效率。本文将介绍一些提高 JVM 性能优化效率的方法，同时附有示例代码，帮助读者更好地了解这些技术。

    1 年前
  • TypeScript 中如何使用装饰器实现依赖注入？

    随着前端技术的不断发展，前端应用的规模越来越大，代码复杂度不断增加，如何组织代码成为一个非常重要的问题。其中之一就是如何管理和注入组件的依赖关系，而装饰器是我们可以利用的工具之一。

    1 年前
  • ESLint 报错：Parsing error: Unexpected character '@'

    什么是 ESLint？ ESLint 是一个基于 JavaScript 的静态代码检查工具，可用于识别 ECMAScript 平台的代码中的问题。它可以帮助开发者避免常见的 JavaScript 错误...

    1 年前
  • 用 JS 和 Fastify 构建 PWA 应用

    在现代 Web 开发中，构建 PWA（Progressive Web Apps）是一个非常热门的话题。PWA 应用具有很多优势，比如可以在离线情况下访问、更快的加载速度、原生应用的功能等等。

    1 年前

相关推荐

    暂无文章