用途:@angular/elements 提供 createCustomElement API,将 Angular 组件封装为浏览器自定义元素,供非 Angular 应用或其他项目使用,也适用于微前端。
主要能力:资料列出 NEW 项,包括 createCustomElement API、NgElementConfig 配置行为、Input/Output 映射(把 Angular 输入输出映射到 Web Component 属性/事件),以及无需 NgModule 的 standalone elements。
使用方式:先安装 npm install @angular/elements。可在注入器中注册:用 createCustomElement(MyComponent, { injector: this.injector }) 生成元素,再 customElements.define('my-element', element)。也可在 main.ts 引导后注册。映射输入输出时传入 events 与 attributes 配置,例如 events: ['myEvent']、attributes: ['myInput']。在 Angular 中使用自定义元素需引入 CUSTOM_ELEMENTS_SCHEMA。数据传递可用 input() 与 output();内容投影使用 ng-content。构建为 Web Component 可在 angular.json 的 build.options 设置 outputPath 与 singleBundle: true。微前端中可遍历多个组件批量注册。
适用场景:把 Angular 组件嵌入其他技术栈页面、构建可复用 UI 元素、微前端集成。
限制:资料未提供价格、平台兼容性、性能或具体版本行为差异,构建与部署细节也暂未提供,需以官方文档为准。