随着项目的规模越来越大，我们需要使用模块来将应用程序分解成更小、更易于管理的部分。在 Angular 中，我们使用 NgModule 来管理模块。本文将介绍什么是 NgModule，如何使用 NgModule 来管理模块，并且提供一些示例代码来帮助您更好地理解。
什么是 NgModule？
在 Angular 中，NgModule 是一个装饰器函数，用于将相关代码组织到 Angular 模块中。每个 NgModule 将一组相关的指令、管道、服务和组件聚合在一起，并将它们注册到 NgModules 中。NgModules 是一个注入器注册表，它设计用来将服务和依赖项绑定在一起。
NgModule 可以导入其他模块并且可以导出自己的一部分或全部内容。您可以使用 NgModule 来定义应用程序逻辑的边界，并为每个应用程序区域提供完整的组件集。
如何使用 NgModule 来管理模块？
在 Angular 中，我们使用 @NgModule 装饰器来定义模块，以下是 @NgModule 装饰器的基本结构：
----------- ------------- --- -------- --- ---------- --- ---------- --- -------- -- --
现在，我们来详细说明 @NgModule 装饰器的属性。
declarations
declarations 是一个数组，包含属于这个模块的组件、指令和管道。这些组件、指令和管道只能通过该模块中的其他组件模板访问。
下面示例中的代码展示了如何在NgModule里面定义组件和指令：
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - ------------ - ---- ------------------
------ - ------------------ - ---- ------------------------
-----------
------------- -
-------------
------------------
--
-------- -
-------------
--
---------- ---
---------- ---------------
-------- --
--
------ ----- --------- - -imports
imports 是一个数组，包含该模块需要的其他模块。在 imports 数组中添加其他 Angular 模块，比如 CommonModule、 FormsModule 和 ReactiveFormsModule。在一个模块中导入其他模块可以简单的使代码组织变得更好。例如，下面的代码展示了如何在 AppModule 中导入 BrowserModule：
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - ------------ - ---- ------------------
------ - ------------------ - ---- ------------------------
-----------
------------- -
-------------
------------------
--
-------- -
-------------
--
---------- ---
---------- ---------------
-------- --
--
------ ----- --------- - -providers
providers 是一个数组，包含该模块需要的服务提供商。在这个数组中，可以添加应用程序中共享的单例服务。下面的代码示例中展示了如何在模块中注册服务：
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - ------------ - ---- ------------------
------ - ------------------ - ---- ------------------------
------ - ------------- - ---- -------------------
-----------
------------- -
-------------
------------------
--
-------- -
-------------
--
---------- -
-------------
--
---------- ---------------
-------- --
--
------ ----- --------- - -bootstrap
bootstrap 是一个数组，表示该模块启动时需要创建的组件。在大多数情况下，我们只需要在主模块中注册一个根组件。在下面的代码示例中展示了如何在 AppModule 中注册 AppComponent：
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - ------------ - ---- ------------------
------ - ------------------ - ---- ------------------------
-----------
------------- -
-------------
------------------
--
-------- -
-------------
--
---------- ---
---------- ---------------
-------- --
--
------ ----- --------- - -exports
exports 是一个数组，包含该模块提供的可用于其他模块的组件、指令和管道。这些导出项将被其他模块使用。在下面的代码示例中，我们将定义的 HighlightDirective 导出，所以其他模块可以使用该指令：
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - ------------ - ---- ------------------
------ - ------------------ - ---- ------------------------
-----------
------------- -
-------------
------------------
--
-------- -
-------------
--
---------- ---
---------- ---------------
-------- --------------------
--
------ ----- --------- - -结论
在 Angular 中，NgModule 是用于管理模块的重要部分。在使用 NgModule 时，我们必须考虑一个组件是否应该被包含在 @NgModule 中。本文中介绍了如何使用 @NgModule 装饰器来定义一个模块，并提供了一些示例代码，帮助我们更好地理解如何使用 NgModule。
希望本文对您有所帮助，对于 Angular 模块管理有更深入的认识。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/66f3d584f40ec5a964e52a7b