Angular 是一款由 Google 推出的前端开发框架，它采用 TypeScript 语言编写，提供一整套前端开发解决方案，包括模块化、组件化、依赖注入、路由等功能。在 Angular 中，@NgModule 是一个重要的概念，它用于模块的管理和组织，能够提高代码的可读性和模块化程度。本文将介绍 Angular 中如何使用 @NgModule 进行模块管理，包括创建模块、导入模块、导出模块、声明组件等操作。
创建模块
在 Angular 中，每个应用都至少需要一个根模块。根模块负责导入其它需要的模块、声明应用的组件、服务等。我们可以使用 Angular CLI 工具来创建新的模块，具体命令为：
-- -------- ------ --------
这个命令将生成一个新的模块 myModule，并在 app 目录下创建一个名为 myModule 的文件夹，其中包含了模块类、模块的测试、模块的样式等文件。
接下来，我们可以打开 myModule.ts 文件来查看生成的模块代码。一个最简单的模块定义如下：
------ - -------- - ---- ----------------
------ - ------------ - ---- ------------------
-----------
------------- ---
-------- -
------------
--
-------- --
--
------ ----- -------- - -在这个代码中，@NgModule 装饰器函数被用来定义模块的元数据。元数据中，有三个重要的属性：
- declarations：声明当前模块中的组件、指令、管道等。
- imports：导入需要使用的其它模块，例如 common 模块、forms 模块等。
- exports：导出当前模块中声明的类、指令、组件等，以便其它模块可以使用。
这里我们仅声明了 CommonModule 模块，该模块中包括了 Angular 框架的常用指令和管道。需要注意的是，因为 Angular 采用了 HTML 在 TypeScript 中的写法，所以我们需要导入 CommonModule 模块来使用常用的指令和管道。
导入和导出模块
在实际开发中，我们可能需要将一个模块中的组件、服务、指令等暴露给其它模块使用。在 Angular 中，可以通过 exports 属性来导出当前模块中声明的类、指令、组件等。例如，我们可以将 MyModule 中的 Component1 和 Component2 组件导出：
------ - -------- - ---- ----------------
------ - ------------ - ---- ------------------
------ - ---------- - ---- ---------------
------ - ---------- - ---- ---------------
-----------
------------- -
-----------
----------
--
-------- ---------------
-------- -
-----------
----------
-
--
------ ----- -------- - -这样，其它模块中就可以直接使用 MyModule 中的 Component1 和 Component2 组件了。例如，在另一个模块中，我们可以这样使用：
------ - -------- - ---- ---------------- ------ - ------------- - ---- ---------------------------- ------ - -------- - ---- -------------- ----------- -------- --------------- ---------- ------------- --- ---------- -- -- ------ ----- --------- - -
在这个代码中，我们通过 imports 属性导入了 MyModule 模块。这样一来，AppModule 中就可以使用 MyModule 模块中导出的组件了。
声明组件
在 Angular 中，声明组件是一项非常重要的工作，因为组件是 Angular 应用的主要构成部分。在 MyModule 中，我们可以声明一个名为 HelloComponent 的组件：
------ - --------- - ---- ---------------- ------------ --------- ------------ --------- ---------- ------------ -- ------ ----- -------------- - -
这个组件会在当前模块中生成一个 HTML 标签，标签名为 app-hello。我们可以在应用中使用该组件，例如：
-----------------------
该 HTML 标签的内容将渲染为 Hello World!。
总结
@NgModule 是 Angular 模块化的重要概念之一，使用它能够提高代码的可读性和模块化程度。本文介绍了如何使用 @NgModule 进行模块的创建、导入、导出和组件的声明，希望对初学者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/665045c4d3423812e428fff7