Angular是一款用于构建 Web 应用程序的 TypeScript 平台。在 Angular 中，我们可以使用自定义元素将自定义代码片段插入到 HTML 中。自定义元素允许我们将组件封装在一个标签中，并可以在应用程序任何地方使用它们。
在本文中，我们将关注如何在 Angular 中使用自定义元素。我们将分别介绍自定义元素的概念、Angular 中的自定义元素以及如何创建和使用自定义元素。
自定义元素的概念
自定义元素是一种 HTML5 特性，它允许开发人员自定义 HTML 标记。自定义元素是不同于常规标准标记的标签，因为它们以新名称定义并与应用程序逻辑相关联。
自定义元素可以让我们更好地封装和组织应用程序代码。应用程序中的组件可以通过自定义元素标记来使用。自定义元素也可以简化代码的使用和维护，并且使模块化变得更加容易。
Angular 中的自定义元素
在 Angular 中，我们可以使用自定义元素来构建可复用的组件，它们可以在不同的 Web 应用程序中使用。
Angular CLI 提供了 @angular/elements 库，通过这个库，我们可以将 Angular 组件封装成可以在任何网页中使用的 Web 总线组件。这种组件可以独立于 Angular 应用程序使用，并以自己的文档对象模型 (DOM) 和上下文运行。
下面是一个简单的例子，其中在 Angular 组件中创建了自定义元素：
-- -------------------- ---- ------- ------ - ---------- ------- -------- - ---- ---------------- ------ - ------------------- - ---- -------------------- ------------ --------- -------------- --------- ------------ -- ---- ----------- -- ------ ----- ---------------- ---------- ------ - ---- - --- ------------------- --------- --------- - - ---------- - --------- - -------------------------- - - ----- ------------- - ------------------------------------- - --------- ------------- --- ----------------------------------- ---------------展开代码
在上面的代码中，我们创建了一个简单的 Angular 组件，名为 MessageComponent。组件被定义为 app-message 选择器，并包含一个 message 变量，可以使用内插表达式将其插入到组件的 HTML 模板中。
创建自定义元素的最后一步是使用 createCustomElement 方法，将 Angular 组件转换为自定义元素。此方法接收两个参数：一个是待转换的组件型号，另一个是注入器对象。注入器是用于调用组件的构造函数的，我们使用它来获取组件中的属性和方法。
在上述示例中，createCustomElement 函数返回自定义元素构造函数。我们可以使用该函数定义自定义元素的名称，并使用文档的 define 方法将其注册为自定义元素。在这个例子中，自定义元素的名称是 my-message。
创建和使用自定义元素
现在让我们看一下如何在 Angular 中创建自定义元素。我们将从 Angular CLI 项目入手，其中已经包含了您需要的所有依赖项。
- 首先，请在 Angular CLI 项目中安装 @angular/elements 依赖项：
npm install @angular/elements --save
- 创建一个例如 my-message 的组件，并添加自定义元素逻辑：
-- -------------------- ---- ------- ------ - ---------- -------- - ---- ---------------- ------ - ------------------- - ---- -------------------- ------------ --------- ------------- --------- ------------ -- ---- ----------- -- ------ ----- ------------------ - ---- - --- ------------------- --------- --------- - - ------------------- - --------- - -------------------------- ----- -------- - -------------------------------- -------------------- - - --- - ------ ---- - -- --------------------------------------- - - ----- --------- - --------------------------------------- - --------- ------------- --- ----------------------------------- -----------展开代码
在上面的代码中，我们定义了一个新组件，名为 MyMessageComponent，并使用 HTML 模板定义了消息。这里还定义了一个属性“name”，当组件初始化时，我们将通过自定义元素讲“name”属性传递到组件中。我们还通过使用 shadow DOM 方式进行样式设置，来增加灵活性。
在自定义元素的构造函数中，我们将获取传递到组件上的“name”属性。通过设置自定义元素方法 connectedCallback，在组件初始化时获取属性值。我们通过使用 style 创建了一个从组件阴影根应用的样式表，以设置消息的文字颜色。
在这个例子中，我们使用了 Angular 的配置文件来插入我们的自定义元素，如在“main.ts”中：
-- -------------------- ---- ------- ------ - --------- -------- - ---- ---------------- ------ - ------------- - ---- ---------------------------- ------ - ------------------- - ---- -------------------- ------ - ------------------ - ---- ----------------------------- ----------- -------- ---------------- ------------- --------------------- ---------------- --------------------- -- ------ ----- --------- - ------------------- --------- --------- - ----- --------- - --------------------------------------- - --------- ------------- --- ----------------------------------- ----------- - --------------- - - -展开代码
在我们的 Angular 应用程序配置中，我们可以导入应用程序我的消息组件。我们将使用 createCustomElement 方法将“my-message”标记与 MyMessageComponent 组件捆绑在一起，然后将此定义重写为自定义元素。
现在，我们已经准备好在 HTML 文件中使用自定义元素。我们需要在 HTML 文件中导入我们的自定义元素，如下所示：
-- -------------------- ---- ------- --------- ----- ----- ---------- ------ ----- ---------------- ------------ ------ -------- -- --------------- ------- ------------------------------- ------- ------ ----------- ------------------------- ------- -------展开代码
在这个例子中，我们通过 JavaScript 导入 my-message 元素，并在 HTML 文件中使用它。我们将“User”属性传递到组件中作为“name”属性。
小结
自定义元素是一种强大的 HTML5 特性，Angular 则提供了更多丰富的支持。在本文中，我们介绍了自定义元素的概念和 Angular 中的使用方式。我们还创建了一个简单的自定义元素例子，并向您展示了如何将 Angular 组件封装为自定义元素。
使用自定义元素可以帮助我们更好地封装和组织代码，从而使代码变得更加可复用和可维护。自定义元素还有很多其他用途，我们鼓励您在自己的项目中探索并使用它们。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67bf210f0c976d473a38f781
