Angular元素允许我们创建可重用的Angular组件，这些组件可以在Angular应用程序之外使用。您可以在任何其他应用程序中使用Angular元素，例如普通HTML，React等。本质上，Angular元素是普通组件，它们被打包为自定义元素。您可以了解更多自定义元素在这里。
Angular元素是可重用的组件，可以在Angular之外使用。您可以了解更多关于
我们将在这篇文章中保持简单，并逐步学习创建基本的Angular元素。那么，让我们开始吧。
步骤1: 安装
使用Angular CLI创建新项目
ng新演示1
创建项目后，将目录更改为demo1并安装Angular元素。为此，运行npm命令，如下所示:
npm install @ angular/elements
要使用旧的浏览器，我们需要polyfill。所以，让我们安装它也如下所示:
npm install @ webcomponents/custom-elements
安装polyfill后，打开文件polyfills.ts并添加这两个条目:
导入 “ '@ webcomponents/custom-elements/src/native-shim' ”；'@ webcomponents/custom-elements/custom-elements.min' 导入;
步骤2: 创建组件
在此步骤中，我们将创建一个可重用组件，该组件将用作Angular元素。
从 “@ angular/core” 导入 { Component，Input}； @ Component({'app-message' 选择器，模板: “”<h1 style = '文本中心' >{{ title }}</h1><h2> 嘿 {{name}} 爱的棱角元素 {{answer }}</h2>',样式: [' h2 {颜色: 红色;}']})导出类MessageComponent {title = “ 角元素 ”；@ Input() name: string;@ Input() 答案: string；}
MessageComponent是一个非常简单的组件，具有两个用 @ Input() 装饰器修饰的属性。
步骤3: 注册组件
要注册要用作Angular元素的组件，我们需要执行以下任务:
- 导入组件。
- 在声明数组中传递它。
- 在entryComponents数组中传递组件。
- 不要在bootstrap数组中传递任何组件。
从 “@ angular/platform-browser' 导入 { BrowserModule}；从 “@ angular/core” 导入 { NgModule}；从 “./message.com组件” 导入 { MessageComponent}； @ NgModule({声明: [MessageComponent],进口: [浏览器模块],供应商: []，引导程序: []，entryComponents: [MessageComponent]})AppModule导出类 { }
我们不需要引导自定义元素。当添加到DOM并从DOM中删除时，它们将被自动创建，但是，它们必须以某种方式创建，因此我们将它们添加到entryComponents数组中。您必须从动态组件知道此属性。
步骤4: 创建元素从组件
我们需要调用createCustomElement从Angular组件创建自定义元素。为此，首先在angular.module中导入以下项目。
从 '@ angular/core' 导入 { NgModule，Injector}；从 “@ angular/elements” 导入 { createCustomElement};
在AppModule中导入所需的模块后，我们需要创建自定义元素，如下面的清单所示。此外，我们手动调用ngdotootstrap。
导出AppModule类 { 构造函数 (private injector: Injector) {const customElement = createCustomElement(MessageComponent, { injector });customElements.de fine( 'app-message', customElement);} ngDoBootstrap() { }}
步骤5: 使用自定义元素
理想情况下，我们将在任何外部html文件中使用自定义元素。在另一篇文章中，我们将介绍这一点。要在同一angular应用程序的index.html中使用创建的自定义元素，只需将其放置在body中，如下所示:
< body ><!-- <app-root></app-root> -->< app-message name = "dj" 答案 = "yes" ></ app-message > ></ body >
现在使用命令ng serve运行应用程序，您应该渲染自定义元素，如下图所示:
因此，我们可以得出结论，要使用Angular自定义元素，我们需要执行以下步骤:
- 安装 @ angular/elements
- 创建组件
- 在entryComponent中注册组件
- 调用createElement以创建自定义元素
- 使用它的html
我希望你觉得这篇文章有用。谢谢你的阅读。如果你喜欢这篇文章，请分享。另外，如果您还没有签出为Angular组件点燃UI,一定要这样做!他们有30个基于材料的角度组件，以帮助您更快地编写web应用程序。</p