前言
在开发 Angular 前端工程时，一些页面需要用到面包屑导航，使得用户可以方便快捷的进行导航。在这篇文章中，我们将介绍如何优雅地实现 Angular 路由的面包屑导航。
Angular 前端路由的使用
Angular 是一种面向组件编程的框架，可以很方便的创建页面组件。而在使用 Angular 进行路由跳转时，通常会使用到 RouterModule 模块。例如：
-- -------------------- ---- ------- ------ - ------------- ------ - ---- ------------------ ------ - ---------------------- - ---- ----------------------------- ----- ------- ------ - - - ----- --------------- ---------- ---------------------- -- -- ----------- -------- ------------------------------- -------- -------------- -- ------ ----- ---------------- - -
此时，我们就可以通过 [routerLink] 属性来实现路由跳转了：
<a [routerLink]="['/products', prod.id]">View details</a>
实现面包屑导航
要实现面包屑导航，需要获取到当前路由的相关信息。可以使用 ActivatedRoute 服务来获取路由信息：
-- -------------------- ---- -------
------ - ---------- ------ - ---- ----------------
------ - --------------- ------- ------------- - ---- ------------------
------------
--------- -----------------
------------ ------------------------------
--
------ ----- ------------------- ---------- ------ -
------------ -----------
------------------- --------------- --------------- - -
---------- -
------------------------------------- -- -
----- ----- - -----------------------
---------------- - ------------------ ----- -- -- -
----- --------- - - --- - - -- - - - --
----- ---- - -
------ -----
----- -------- - ------------------
--
---------------
------ ----
-- -- ------ ------- ----- -- ----
---
-
-在组件中，我们使用 activatedRoute.url 订阅路由信息，然后解析出路径中的各个部分，将它们封装为面包屑导航。
在 HTML 中，只需要使用 ngFor 指令来遍历面包屑导航数组即可：
-- -------------------- ---- -------
-----
----
------------- ----------- ---- -- -------------
--- -------------------
-- -------------- --------- ------ ---------- ------
-----
---------------
-----
------总结
本文中，我们使用 ActivatedRoute 服务来获取路由信息，然后将其封装为面包屑导航。通过这种方式，我们可以优雅地实现 Angular 路由的面包屑导航。
示例代码：https://stackblitz.com/edit/angular-breadcrumb-navigation
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6484c87048841e98943ca0d0