在 Angular 中，组件是构建应用程序的主要构建块。因此，可重用性组件封装是任何 Angular 应用程序的关键要素之一。封装一个组件使其能够在应用程序中被重复使用，这是提高代码质量，减少代码冗余以及提高维护性的重要方法。
本文将介绍如何在 Angular 中进行可重用性组件封装，包括：
- 创建可重用性组件；
- 将组件封装为 Angular 模块；
- 将模块发布到 npm；
- 使用发布的模块。
创建可重用性组件
要创建可重用性组件，请执行以下操作：
- 创建一个组件；
- 将它封装在一个模块中；
- 共享模块。
首先，创建一个名为 my-component 的组件，可以使用 Angular CLI 命令来创建它：
ng generate component my-component --inlineTemplate --skipTests
该命令将生成 my-component 组件，并将其添加到 app.module.ts 文件中。现在，我们可以编写 my-component.component.ts 文件，并添加我们想要的功能和逻辑。
例如，假设我们的 my-component 组件包含一些输入和输出，它们用于改变组件的行为和在组件和父级组件间传递数据。此时的代码可能如下所示：
-- -------------------- ---- -------
------ - ---------- ------- ------ ------- ------------ - ---- ----------------
------------
--------- -------------------
------------ --------------------------------
---------- --------------------------------
--
------ ----- -------------------- ---------- ------ -
-------- ----- -------
--------- ----------- --------------------- - --- ---------------
------------- - -
---------- -
-
--------- -
---------------------------
-
-这个组件包含了一个输入，一个输出和一个点击事件。当点击组件时，它会触发点击事件并将一个布尔值传递给父级组件。
将组件封装为 Angular 模块
接下来，我们需要将 my-component 组件封装为 Angular 模块。这样，我们就可以将其共享给其他 Angular 应用程序。
要创建一个模块，请执行以下操作：
- 创建一个 Angular 模块；
- 导出组件；
- 更新 AppModule。
先使用 Angular CLI 创建一个名为 my-library 的新项目并使用以下 CLI 命令来在项目中创建一个名为 my-library 的模块：
ng generate module my-library --routing --route my-library --module app
接着，编辑 my-library.module.ts 来导入 my-component 组件并导出它。
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------ - ---- ------------------
------ - ------------ - ---- ------------------
------ - -------------------- - ---- ----------------------------------------
-----------
-------- -
-------------
------------------------ ----- ------------- ---------- -------------------- ---
--
-------- -
--------------------
--
------------- -
--------------------
--
---------- --
--
------ ----- --------------- - -在这里，我们导入了 MyComponentComponent 组件，并将它声明为我们的模块的一部分。我们还将它添加到 exports 数组中，以便其他应用程序可以访问它。最后我们使用路由将其绑定到 my-library 路径。
现在，我们需要更新 app.module.ts 文件，以便它包含 MyLibraryModule 并将其作为导入的部分。
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - ------------ - ---- ------------------
------ - --------------- - ---- -------------
------ - ------------ - ---- ------------------
------ - ------------- - ---- ------------------------
------ - -------------- - ---- --------------------------
-----------
------------- -
-------------
--------------
--------------
--
-------- -
--------------
----------------------
- ----- --- ---------- ------- ----------- ------ --
- ----- ------- ---------- ------------- --
- ----- -------- ---------- -------------- --
---
---------------
--
---------- ---
---------- --------------
--
------ ----- --------- - -在这里，我们使用 MyLibraryModule 并将其作为导入的部分。这样，我们的 MyComponent 组件就可以在我们的应用程序中被使用了。
将模块发布到 npm
现在，如果我们想要将模块共享到其他项目中，我们需要将其发布到 npm。要发布模块，请执行以下步骤：
- 创建一个名为
my-library的 npm 账户； - 在本地计算机上登录；
- 使用
npm publish命令发布到 npm。
通过运行 npm login 命令来登录到 npm 账户，系统将提示您输入用户名、密码和电子邮件地址。
接着，在 my-library 应用程序的根目录中运行以下命令：
npm publish
此时，npm 将会将您的代码压缩并将其上传到 npm 服务器。
使用发布的模块
要使用刚刚发布的模块，请在任何应用程序中运行以下命令：
npm install my-library
现在，我们可以在任何应用程序中使用 my-library 模块，并引入我们自己的组件。例如，我们可以将 MyComponent 组件添加到我们的 app.component.html 文件中：
<app-my-component name="World!" (clickEvent)="onClick($event)"></app-my-component>
当我们点击组件时，它将触发点击事件并将 true 值传递给我们的父级组件。
结论
在 Angular 应用程序中创建可重用性组件是开发人员的关键任务之一。本文介绍了如何在 Angular 中进行可重用性组件封装，并将它们发布到 npm。在正确设置之后，我们就可以在我们的应用程序中使用这些组件，并且将它们共享给其他开发人员。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66f0d0d66fbf960197340fba