在前端开发中，我们经常需要轻松地将组件移植到其他项目或框架中使用。为此，我们可以使用 Web Components 中的 Custom Elements，它允许我们定义自己的 HTML 元素。
在 Angular 中，我们可以使用 Custom Elements 直接导出组件，并在其他项目中使用。下面我们将深入了解 Angular 中 Custom Elements 的使用方法。
前置知识要求
在本文中，我们将假设你已经对 Angular 有基本的了解，并且已经能够创建 Angular 应用程序。
对于 Custom Elements 的概念，我们假设读者已经对 Web Components 有一定的了解。
创建 Custom Element
要将 Angular 组件导出为 Custom Element，我们需要做以下几个步骤。
首先，我们需安装 @angular/elements 包，使用指令npm install --save @angular/elements.
接下来，我们需要在 AppModule 中引入 createCustomElement 函数。该函数需要 Injector、要导出的组件以及要导出的组件所在的 Angular 模块或 NgModule。
以下是一个简单的例子：
-- -------------------- ---- -------
------ - ------------- - ---- ----------------------------
------ - --------- -------- - ---- ----------------
------ - ------------ - ---- ------------------
------ - ------------------- - ---- --------------------
-----------
------------- ---------------
-------- ----------------
---------- ---
---------------- ---------------
--
------ ----- --------- -
------------------- --------- --------- -
-
--------------- -
----- -- - --------------------------------- - --------- ------------- ---
------------------------------------------ ----
-
-在上述代码中，我们使用 createCustomElement 函数定义了一个名为 my-custom-element 的 Custom Element；该元素将渲染 AppComponent 组件。
最后，我们必须在 index.html 中包含所需的 JavaScript 文件。可以通过引用生成的 main.js 文件来完成。
<script src="main.js"></script>
现在我们已经成功导出了一个 Angular 组件作为 Custom Element。接下来，我们将在其他项目中使用 Custom Element。但在跨应用程序使用 Custom Element 之前，我们需要确保我们已经包含了所有依赖项。
使用 Custom Element
在您的其他应用程序中使用导出的 Custom Element 很简单。你可以在任何 HTML 文档中使用自定义元素来实现 Angular 组件。
<my-custom-element></my-custom-element>
这里的 my-custom-element 是在 AppModule 中定义的 Custom Element 名称。它将渲染组件 AppComponent。
检查您的应用是否已经具有必需的 polyfill 和 polyfill 配置，包括 zone.js、core-js 和 custom-elements-es5-adapter.js。这样才确保 Custom Elements 在旧版浏览器中可以正常工作。
指导意义
通过将 Angular 组件导出为 Custom Element，我们可以方便地将其用于其他项目或框架中，并保持其完整功能性。
这个方法的好处是它可以方便地将自己的模块添加到其他框架或应用程序中，而不需要在购买新工具或编辑现有代码的情况下自行导入和自定义代码。失败风险也降低了，而且有代码和实现的代码是为自己创建的，使得每个开发者都可以更加快捷地使用更好的维护方式来提高产品的发展。
最后，自定义元素允许我们通过可插入接口，而不是写死的框架，使我们的组件更易于重用和扩展。这使得我们可以编写具有复杂功能的通用组件，这些组件可以快速轻松地在多个项目中使用。
示例代码
下面是一个使用 Custom Element 的完整示例代码：
-- -------------------- ---- -------
------ - ------------- - ---- ----------------------------
------ - --------- -------- - ---- ----------------
------ - ------------ - ---- ------------------
------ - ------------------- - ---- --------------------
-----------
------------- ---------------
-------- ----------------
---------- ---
---------------- ---------------
--
------ ----- --------- -
------------------- --------- --------- -
-
--------------- -
----- -- - --------------------------------- - --------- ------------- ---
------------------------------------------ ----
-
-
上述代码导出了 AppComponent 组件作为名为 my-custom-element 的 Custom Element。
这里是 index.html 文件：
<my-custom-element></my-custom-element> <script src="polyfills.js"></script> <script src="scripts.js"></script>
注意，在此示例中，我们希望浏览器首先将polyfill.js标记为必须，以确保在不支持 Web Components 的旧版本浏览器中，Custom Elements 可能会出错。其他依赖项的脚本在加载应用程序本身之前被加载。
总结: Angular 中使用 Custom Elements
现在，我们了解了如何在 Angular 应用程序中使用 Custom Elements。Custom Elements 允许 Angular 组件在其他框架和应用程序内运行，它的灵活性和移植性对于构建大型应用程序和通用库都非常有用。通过本文所述的方法，我们可以轻松地将自己的组件包装成自定义元素，并在外部应用程序中使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6450bdae980a9b385b9ab79b