Angular 是一个流行的前端框架，其模块化的特性和强大的组件系统为前端开发提供了很多便利。在本文中，我们将使用 Angular 的动态组件来实现一个可配置可扩展的面包屑，帮助我们在导航中更加方便地追踪和管理页面状态。
什么是面包屑
面包屑（Breadcrumb）是一个常见的 UI 组件，用于表示用户当前位置和路径，通常用于 WEB 应用程序中的导航。它通常呈现为一条水平的链接路径，典型的样式如下：
Home > Products > Category > Product Name
使用 Angular 动态组件实现面包屑
在 Angular 中，我们可以通过动态组件来实现扩展性强的面包屑组件。动态组件是一种可以在运行时动态添加和移除的组件。我们可以在组件内部使用动态组件来处理子元素的渲染，从而使我们的应用程序更加灵活、可扩展和可配置。
准备工作
首先，我们需要创建一个新的 Angular 工程，并安装必要的依赖库。你需要先前安装了 Angular CLI，否则请执行以下命令安装：
npm i -g @angular/cli
然后，创建新工程：
ng new breadcrumb-example
在创建工程后，我们还需要安装一些依赖库：
npm install @angular/cdk --save npm install @angular/material --save npm install prismjs --save
我们将使用 Angular CDK 和 Angular Material 来构建我们的面包屑组件。Prism.js 是一个用于语法高亮的库，它将帮助我们更好地展示代码示例。
实现 Breadcrumb 组件
现在我们开始实现我们的面包屑组件。使用 Angular CLI 创建一个新的面包屑组件：
ng g c breadcrumbs
然后打开 breadcrumbs.component.ts 文件并添加以下代码：
-- -------------------- ---- -------
------ - ---------- ------- ------ ---------- ----------- ------------------------ - ---- ----------------
------ - -------------- - ---- --------------------
------ - ----------------------- - ---- ------------------------------
------------
--------- ------------------
------------ -------------------------------
---------- --------------------------------
--
------ ----- -------------------- ---------- ------ -
-------- ------ ------ ---------------- - ---
----------------------- ------ ------------ ------- ---------- -----------
------------------- ------------------------- ------------------------- --
---------- -
-- ------------------ - -- -
----------------------------------
-
-
------- ----------------------- ----------------- ------- --- - ----- -
----- ---------------- - -------------------------------------------------------------------------------
----- ---------------- - ------ - ----------------------- - ---------------
-------------------------
-------------------- -- ---- -- -
----- ------------ - ---------------------------------------------------
--------------------------- - -----------
------------------------------ - - --- ---------- - --
---------------------------- - - --- ---------- - --
-- --------------------- - -- -
----- ---------------- - ------------------------------------
----- -------------- - -
------------- ----------------- -----------------
--
------------------------------------ ----------------
-
---
-
-在这个组件中，我们通过 @Input() 注解声明了一个名为 items 的输入属性，它是一个数组，存储了我们的面包屑组件的数据。在组件的构造函数中，我们注入了 ComponentFactoryResolver，这个服务可以在运行时从组件工厂中获取组件工厂，这样我们就可以使用动态组件了。
createComponents 方法是实现动态组件的核心所在。该方法会接收一个名为 items 的参数和一个可选的名为 parent 的参数。items 参数是一个我们准备在面包屑中渲染的面包屑项数组。parent 参数是一个对象，其中包含下一个面包屑子组件应该被创建的位置信息。
在这个方法中，我们首先从导入的 BreadcrumbItemComponent 组件工厂中获取一个组件工厂。然后，我们使用 ViewContainerRef 来获取我们要渲染子组件的位置。
随后，我们创建一个面包屑项组件，并通过 componentRef.instance 将相应的数据传递给该组件。我们设置 isActive 属性为一个布尔值，将其设置为匹配当前面包屑的位置（这是因为我们可以像在阿里巴巴所看到的那样，单击面包屑的任何位置，它都会重定向到该页面），并在组件的末尾设置 isLast 属性为 true。最后，我们检查当前面包屑项中是否有其他子项，如果有，我们将继续递归。
与 BreadcrumbItem 组件配合使用
要在组件中使用我们的面包屑组件，我们需要先创建一个名为 BreadcrumbItem 的简单接口类型的文件：
export interface BreadcrumbItem {
label: string;
link?: string;
children: BreadcrumbItem[];
}该接口定义了我们的面包屑条目对象。每个面包屑对象包含一个 label 属性，表示别名或标签名，一个可选的 link 属性，用于链接到该面包屑页面的 URL，并一个 children 属性，表示这个面包屑条目的子面包屑项。最后，我们在 breadcrumbs.component.html 文件中调用该组件，如下所示：
<ng-template #container></ng-template>
我们使用 ng-template 元素作为容器，并使用 ViewChild 装饰器在 breadcrumbs.component.ts 文件中获取它，在面包屑条目组件后动态添加子面包屑组件。下面是 breadcrumb-item.component.ts 文件的代码：
-- -------------------- ---- -------
------ - ---------- ----------- ------------- ------ ------ - ---- ----------------
------------
--------- ----------------------
------------ -----------------------------------
---------- ------------------------------------
--
------ ----- ----------------------- -
-------- ------ ------ -------
-------- ------ -------- - ------
-------- ------ ------ - ------
--------- ------ ------- - --- ---------------------
------------------- ----------- ----------- --
------ --------- -
--------------------
-
------ --- --------- -
------ ------------------------------
-
-此组件负责渲染每个面包屑项（在面包屑组件中使用）。它有三个输入属性：label，isActive 和 isLast。我们还定义了一个 clicked 事件，当面包屑被单击时，将其广播到应用程序的其他部分。
让我们创建面包屑条目组件的 HTML 文件。并在文件中添加以下代码：
<span class="label" [ngClass]="{'last': isLast, 'active': isActive}" (click)="onClick()">
{{ label }}
</span>
<span class="separator" *ngIf="!isLast">></span>在这个文件内，我们定义了两个 span 元素，它们用来渲染标签 label、面包屑分隔符和面包屑的状态。。
使用示例
现在我们可以创建面包屑并将其包含到任意组件中了。让我们创建一个简单的示例来展示如何使用它。
首先，在根目录下创建一个名为 routes.ts 的文件，其中包含以下内容：
-- -------------------- ---- -------
------ - -------------- - ---- --------------------------------
------ ----- ------- ---------------- - -
-
------ -------
----- ----
--------- ---
--
-
------ -----------
--------- -
-
------ --------- ---
--------- -
-
------ -------- ---
--------- ---
--
-
------ -------- ---
--------- ---
--
--
--
-
------ --------- ---
--------- -
-
------ -------- ---
--------- ---
--
-
------ -------- ---
--------- ---
--
--
--
--
--
--这是一个简单的导航栏定义，其中包含了一些可扩展的子面包屑项。
在 AppComponent 的 HTML 模板中，添加以下代码：
<app-breadcrumbs [items]="breadcrumbItems"></app-breadcrumbs>
在 AppComponent 的 TypeScript 文件中，导入我们刚刚创建的 routes.ts 文件，并添加以下代码：
-- -------------------- ---- -------
------ - ---------- ------ - ---- ----------------
------ - -------------- - ---- --------------------------------
------ - ------ - ---- -----------
------------
--------- -----------
------------ -----------------------
---------- ------------------------
--
------ ----- ------------ ---------- ------ -
------ ---------------- ---------------- - ---
---------- -
-------------------- - -------
-
-在这个文件中，我们实例化了 breadcrumbItems 数组，并将其传递到面包屑组件中。
现在，运行应用程序并在浏览器中打开它，你应该看到类似如下的面包屑导航条：
Home > Products > Category 1 > Product 1
尝试点击其中一个面包屑项中的任意一个链接。您将看到导航栏更新并显示您当前的位置。当您浏览到其他页面时，你也可以更改 breadcrumbItems 数组，通过添加或删除了面包屑对象动态添加或删除面包屑项。通过这种方式，您可以实现高扩展性的面包屑导航式导航。
总结
我们的 Angular 实现动态组件在运行时创建了一个可配置、可扩展的面包屑组件。使用这些组件，我们可以轻松扩展和管理面包屑导航，同时实现我们应用程序中所有页面的简单导航。
你现在学会了使用 Angular 动态组件实现可配置、可扩展的面包屑组件，并且也尝试了一下如何使用它们。随着您的经验增长，您还可以在其他 Angular 应用程序中使用这个方法，这样您就可以实现高可扩展能力的前端应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646873c8968c7c53b08a9177