前言
随着前端技术的不断发展，Web Components 成为了一个趋势。它可以让我们开发可重用、可组合、可扩展的 UI 组件，这些组件可以被用于多个项目中。当然，在现实生产环境中，我们的前端项目中使用的框架很多都不支持 Web Components，其中 Angular 也是其中之一。但是，本文将介绍如何在 Angular 项目中配合使用 Web Components。
Angular 支持 Web Components
在 Angular 6 及以后的版本中，Angular 开始支持 Web Components。在 Angular 中使用 Web Components 有两种方式：
- 在 Web Components 中使用 Angular：使用 Angular 框架，创建组件并将它们封装成 Web Components，然后将它们在其他项目中使用。
- 在 Angular 中使用 Web Components：使用存在的 Web Components，并将它们在 Angular 应用程序中使用。
本文我们将介绍第二种方法。
开发步骤
安装库
首先，我们需要安装两个库：@angular/elements 和 @webcomponents/custom-elements。
npm install --save @angular/elements @webcomponents/custom-elements
创建组件
我们来创建一个简单的 Web Components，默认显示的是一个 div 标签，当鼠标移到它上面时文字变红。
-- -------------------- ---- -------
---- --------------------- ---
-------
----- -
-------- ------
-------- -----
----------------- -----
-
--------- -
------ ----
-
--------
------- --- ---------------
--------
-- ------ ----------- ----
----- -------------- ------- ----------- -
------------- -
--------
-
-
-- ----------
----------------------------------------- ----------------
---------创建 Angular 模块
接下来，我们需要创建一个 Angular 模块，以及包含我们 Web Components 的模块。
-- -------------------- ---- -------
-- -------------
------ - --------- -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - ------------------- - ---- --------------------
------ - -------------- - ---- ------------------------------------------------
-----------
-------- ----------------
------------- -----------------
---------------- -----------------
---------- ---
--
------ ----- --------- -
------------------- --------- --------- --
--------------- -
-- - -------------- ------------- --- ---------
----- --------- - ----------------------------------- - --------- ------------- ---
----------------------------------------- -----------
-
-我们使用 createCustomElement 方法将 Angular 组件转为实际使用的 Web Component。
添加自定义元素脚本
最后，我们需要添加自定义元素脚本（custom elements polyfill），以兼容旧版浏览器。
在 index.html 文件中添加以下内容：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- --------------- --
--------------------
------- ----------------------------------------------------------------------------------------------------
----- -------- --
----- --------------- ---------------------------- ---------------- --
-------
------
---------------------
-- ------
------- -------------------------------------
-------
-------在应用程序中使用 Web Component
现在，我们就可以在 Angular 应用程序中使用我们的 my-web-component 组件。
在模板中添加以下内容：
<my-web-component></my-web-component>
总结
本文介绍了如何在 Angular 项目中使用 Web Components。我们首先安装了两个库：@angular/elements 和 @webcomponents/custom-elements，然后创建了一个简单的 Web Component，在 Angular 应用程序中使用它。实现这个功能的关键就是通过 createCustomElement 方法将 Angular 组件转为实际使用的 Web Component。
示例代码
https://github.com/xxx/my-web-component
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/652b3b4b7d4982a6ebd3be7b