在 Web 应用程序开发中，面包屑导航是一种有用的用户界面元素，可以帮助用户追踪他们在应用程序中的位置。然而，手动创建和维护面包屑导航可能会变得繁琐且容易出错。在这篇文章中，我们将介绍如何使用 AngularJS 和 Angular UI Router 来创建一个自动化动态面包屑导航组件。
前提条件
在开始编写代码之前，您需要确保已经安装了以下软件包：
如果您还没有安装这些软件包，请按照各自的文档进行安装。
动态生成面包屑导航
我们首先需要定义一个指令来动态生成面包屑导航。在 Angular 中，指令是一种可重用的组件，它可以添加到页面中的任何元素上，并根据需要修改该元素的行为或外观。
下面是一个示例指令，它将自动在当前路由状态下生成面包屑导航：
<ol class="breadcrumb">
<li ng-repeat="crumb in breadcrumbs" ng-class="{ active: $last }">
<a ng-if="!$last" ui-sref="{{ crumb.route }}">{{ crumb.label }}</a>
<span ng-if="$last">{{ crumb.label }}</span>
</li>
</ol>该指令使用了 Angular 的 ng-repeat 指令来循环遍历面包屑导航条目，并使用 ng-class 指令来将样式类应用于当前选中的导航条目。
定义面包屑导航服务
为了能够生成面包屑导航，我们需要定义一个服务来跟踪当前的路由状态并生成相应的面包屑导航条目。下面是一个示例服务：
-- -------------------- ---- -------
-------------------------- -------------- --------- -------------------- ------- -
--- ----------- - ---
-------- ---------------- -
--- ------ - ---
--- ------ - -----------------------
----- ------- -- ----------- --- --- -
--------------------
------ - --------------
-
------ -----------------
-
-------- --------------------- -
--- ------ - ------------
----------- - --
------ -------
------ ------
---
----------------------- --------------- -
-- ----------- -- ----------------------- -
------------------
------ -----------------------
------ ----------
---
-
---
-
------------------------------------- ---------- -
----------------------
---
------ -
---- ---------- -
------ ------------
-
--
----该服务使用 $state 服务来跟踪当前的路由状态，并使用其父级状态来生成面包屑导航条目。generateBreadcrumbs 函数会在每次路由状态发生变化时调用，以更新面包屑导航。
将服务注入指令
最后，我们需要将 breadcrumbs 服务注入我们的指令中，并使用它来生成面包屑导航。下面是一个示例指令：
-- -------------------- ---- -------
---------------------------- --------------- --------------------- -
------ -
--------- ----
--------- ---- -------------------- -
---- ---------------- -- ------------ ----------- ------- ----- ---- -
--- -------------- ----------- ----------- ------ ----------- ------- -
------ ---------------- ----------- ---------- -
------- -
--------
----- --------------- -
----------------- - ------------------
-
--
----该指令使用 `
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/27702