Web Components 是一个用于开发可重用组件的新兴技术。该技术使组件之间的合作变得更加容易，同时也能够让我们在任何现代浏览器中创建跨平台应用。Angular 是一个流行的前端框架，它支持 Web Components 技术，让我们可以使用 Web Components 技术来创建 Angular 组件。
Angular Elements
Angular 框架从 6.0 版本开始支持 Angular Elements。Angular Elements 是一套工具，它使我们能够将 Angular 组件打包成 Web Components，然后使用它们来创建我们的 Web 应用。Angular Elements 可以将 Angular 组件打包成自定义元素，我们可以在任何页面中使用自定义元素，即使没有 Angular 应用。
以下是一个简单的 Angular 组件示例：
-- -------------------- ---- -------
------ - ---------- ------ - ---- ----------------
------------
--------- --------------
--------- -
------- --------------------------------
-------- ------- ---------
------- --------------------------------
-
--
------ ----- ---------------- ---------- ------ -
------- - --
---------- --
----------- -
---------------
-
----------- -
---------------
-
-我们可以使用以下命令将其打包成 Web Component：
ng build --prod --output-hashing none --single-bundle true --module-name=elements --target=es5 --no-source-map && cat dist/elements/runtime.js dist/elements/polyfills.js dist/elements/scripts.js dist/elements/main.js > dist/elements.js && npx @webcomponents/custom-elements dist/elements.js
该命令将生成名为 app-counter 的 Web Component，我们可以像使用普通 HTML 元素一样使用它：
<app-counter></app-counter>
组件通信
在 Web Components 中，我们可以使用自定义事件和属性来进行组件之间的通信。在 Angular Elements 中，我们可以使用 Angular 的 @Output 装饰器和自定义元素事件来传递消息。
以下是 counter 组件中添加一个事件输出的示例：
-- -------------------- ---- -------
------ - ---------- ------------- ------- ------ - ---- ----------------
------------
--------- --------------
--------- -
------- --------------------------------
-------- ------- ---------
------- --------------------------------
-
--
------ ----- ---------------- ---------- ------ -
--------- ------------- - --- -----------------------
------- - --
---------- --
----------- -
---------------
--------------------------------------
-
----------- -
---------------
--------------------------------------
-
-在上面的示例中，当点击“增加”或“减少”按钮时，counterChange 事件输出器将被触发，并将 counter 值作为参数传递。我们可以使用自定义元素事件来捕获并处理这个事件：
const counter = document.querySelector('app-counter');
counter.addEventListener('counterChange', (event) => {
console.log(event.detail);
});当 counterChange 事件被触发时，我们将会在控制台中打印出新增的 counter 值。
总结
Angular Elements 使我们可以将 Angular 组件打包成 Web Components，并像普通 HTML 元素一样使用它们。我们可以使用自定义元素事件和 Angular 的 @Output 装饰器来进行组件之间的通信。Web Components 技术可以让我们创建可重用组件，而 Angular 这样的前端框架可以让我们更轻松地利用这些组件。如果你还没有尝试过 Angular Elements，现在就行动起来吧！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647d313c968c7c53b0801aef