Custom Elements 是一种用于创建自定义 DOM 元素的规范。使用 Custom Elements，我们可以创建自定义标签，并为其添加自定义行为和样式，然后将其像普通的 HTML 元素一样使用。
在本文中，我们将会介绍如何在 Angular 中应用 Custom Elements，并通过实际示例来演示其应用。
Custom Elements 介绍
Custom Elements 是 Web Components 规范中的一部分，它提供了一种自定义 HTML 元素的方式，让开发者可以创建自己的标签，并在标签上添加自定义行为和样式。Custom Elements 使得我们可以将已有的组件或框架封装为自定义元素，并在任何 Web 应用中使用。Custom Elements 的工作原理是通过浏览器提供的 API 来实现的。
在 Angular 中应用 Custom Elements
使用 Custom Elements 可以增加代码的可重用性和可维护性，而现代前端框架，如 Angular，也提供了对 Custom Elements 的支持。在 Angular 中，我们可以使用 @angular/elements 库来创建 Custom Elements。
创建 Custom Element
首先，我们需要创建一个 Angular 组件，并将其转化为 Custom Element。下面是一个简单的示例：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ------------------- - ---- --------------------
------------
--------- --------------
--------- ----------- ------------
--
------ ----- ------------------- -
------------- - -
----------------- -
-------------------------------- ------------------
-
-
----- ----------------- - ---------------------------------------- - --------- ------------- ---
------------------------------------ -------------------在上述代码中，我们首先定义了一个 Angular 组件 HelloWorldComponent，然后使用 createCustomElement 方法将其转化为 Custom Element HelloWorldElement。最后，我们调用 customElements.define 方法来定义自定义标签 hello-world。
将 Custom Element 集成到 Angular 应用中
当我们定义了 Custom Element 后，我们需要将其集成到 Angular 应用中。下面是一个简单的示例：
-- -------------------- ---- -------
------ - ------------- - ---- ----------------------------
------ - --------- -------- - ---- ----------------
------ - ------------ - ---- ------------------
------ - ------------------- - ---- --------------------------
------ - ------------------- - ---- --------------------
-----------
------------- -
-------------
-------------------
--
-------- -
-------------
--
---------------- -
-------------------
-
--
------ ----- --------- -
------------------- --------- --------- -
----- ----------------- - ---------------------------------------- - -------- ---
------------------------------------ -------------------
-
--------------- --
-在上述代码中，我们定义了一个 AppModule，并在其构造函数中注册 Custom Element。我们需要使用 createCustomElement 方法将 HelloWorldComponent 转化为 Custom Element，并使用 customElements.define 方法注册自定义标签。
最后，我们需要在 entryComponents 中声明 HelloWorldComponent，以使 Angular 编译器知道该组件哪些地方被使用到了。
在 HTML 中使用 Custom Element
当我们定义和注册了 Custom Element 后，就可以在 HTML 中使用它了。下面是一个简单的示例：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------- ------ ----------------
-------
------
---------------------------
------- ------------------------------
-------
-------在上述代码中，我们声明了自定义标签 hello-world，并在 HTML 中调用它。
示例代码
下面是一个完整的示例代码：
app.component.ts
-- -------------------- ---- -------
------ - ---------- -------- - ---- ----------------
------ - ------------------- - ---- --------------------
------------
--------- -----------
--------- -----------------------------
--
------ ----- ------------ -
------------------- --------- --------- - -
--------------- -
----- ----------------- - ---------------------------------------- - --------- ------------- ---
------------------------------------ -------------------
-
-
------------
--------- --------------
--------- ----------- ------------
--
------ ----- ------------------- -
------------- - -
----------------- -
-------------------------------- ------------------
-
-app.module.ts
-- -------------------- ---- -------
------ - ------------- - ---- ----------------------------
------ - -------- - ---- ----------------
------ - ------------- ------------------- - ---- ------------------
------ - ------------------- - ---- --------------------
-----------
------------- -
-------------
-------------------
--
-------- -
-------------
--
---------------- -
-------------------
-
--
------ ----- --------- -
--------------- --
-index.html
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------- ------ ----------------
-------
------
---------------------------
------- ------------------------------
-------
-------指导意义
Custom Elements 可以提高代码的可重用性和可维护性，同时也我们可以使用已有的组件或框架封装为自定义元素，并在任何 Web 应用中使用。在 Angular 中，使用 @angular/elements 库可以轻松地创建和使用 Custom Elements。
总结
本文介绍了如何在 Angular 中应用 Custom Elements，并通过实际示例演示了其应用。Custom Elements 可以提高代码的可重用性和可维护性，同时也可以使用已有的组件或框架封装为自定义元素，并在任何 Web 应用中使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/654e01797d4982a6eb757ad8