Angular Element

Posted 2021-04-26 牛IT技术栈

Angular Element就是打包成自定义元素的 Angular 组件。所谓自定义元素就是一套与具体框架无关的用于定义新html 元素的 Web 标准。它借助Chrome浏览器的ShadowDom  API，用Angular普通组件的开发技术进行编写，把一个可实例化的 javascript 类映射到 HTML 标签上。如果页面引入该Js文件 ，就相当于在页面中新增了一个标签，所以在任意框架中都可以使用新标签，就像它是原生div一样。

把组件转换成自定义元素会让所需的 Angular 基础设施也可用在浏览器中。创建自定义元素非常简单直接，它会自动把你的组件视图对接到变更检测和数据绑定机制，会把 Angular 的功能映射到原生 HTML 中的等价物。

特点

• 通过使用原生的 HTML 语法来使用 Angular Elements —— 这意味着不再需要了解 Angular 的相关知识

• 它是自启动的，并且一切都可以按预期那样运作

• 它符合 Web Components 规范，这意味着它可以在任何地方使用

• 虽然你没有使用 Angular 开发整个网站，但你仍然可以从 Angular Framework 这个庞大的体系中收益

工作原理

使用 createCustomElement() 函数来把组件转换成一个可注册成浏览器中自定义元素的类。 注册完这个配置好的类之后，你就可以在内容中像内置 HTML 元素一样使用这个新元素了。

官方图解

实战

github上有及其优秀的实战项目angular-elements-dashboard，支持动态加载模块和动态加载外部的模块。网址参考：

https://github.com/manfredsteyer/angular-elements-dashboard

推荐

关于Angular 元素的讲解推荐一位前端牛人的讲解文章。内容比较清晰。由于不允许转载。请前往查看。

https://cloud.tencent.com/developer/article/1345336