15

我是Angular 2的新手。

Angular 2@NgModule中到底有什么？我参考了Angular的官方文档。但我没有任何清晰。

4

5 回答 5

10

随着应用程序开始变得越来越复杂，很明显所有应用程序都应该划分为modules. 每个模块本身就是一个小型迷你应用程序，但现在您可以将所有这些迷你应用程序捆绑在一起以创建更大的应用程序。

在此处输入图像描述

Angular 对创建模块的回答是@NgModule. 这是允许您创建模块的标签。Angular 中的模块由我们不会讨论的其他内容组成components或与其他内容一起组成。other module's components

因此，假设您的应用程序有两个大部分 - 愿望清单和购物车。您可以为它们中的每一个创建模块 -WishlistModule和CartModule. 在 WishlistModule 中，您将拥有多个组件（装饰为 @NgComponent），例如显示项目、拖放项目等。对于 CartModule 也是如此。

要创建模块，您需要@NgModule像下面这样使用。

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { WishlistMainComponent }   from './wishlistMain.component';
import { WishlistShowComponent }   from './wishlistShow.component';
import { WishlistDragComponent }   from './wishlistDrag.component';
import { HeaderModule }   from './header.module';

@NgModule({
  imports:      [ 
    BrowserModule,
    HeaderModule
  ],
  declarations: [
    WishlistMainComponent, WishlistShowComponent, WishlistDragComponent
  ],
  bootstrap: [ WishlistMainComponent ]
})
export class WishlistModule { }

正如其他答案已经指出的那样，@NgModule在幕后做了很多事情，但简单来说，它声明了一个模块。它有点像一个 Java 类，无论你在bootstrap选项中传递什么，都像 main() 方法。

一个模块（或@NgModule）本身只不过是一个包含一堆components. 一个组件定义了一个标签，例如<wishlist></wishlist>angular 将你所有的愿望清单代码放在哪里。模块就在组件所在的下面，如果你想使用外部组件，那么你只能通过导入它的模块来实现，就像 Java 类和方法一样。

于 2019-01-09T19:51:20.330 回答
2

Angular NgModules 不同于并补充了 JavaScript (ES2015) 模块。NgModule 声明了一组组件的编译上下文，这些组件专用于应用程序域、工作流或一组密切相关的功能。NgModule 可以将其组件与相关的代码（例如服务）关联起来，形成功能单元。

一个 NgModule 由一个用 @NgModule() 修饰的类定义。@NgModule() 装饰器是一个接受单个元数据对象的函数，其属性描述了模块。最重要的属性如下。

声明：属于这个 NgModule 的组件、指令和管道。

导出：应该在其他 NgModule 的组件模板中可见和可用的声明子集。

导入：在此 NgModule 中声明的组件模板需要其导出类的其他模块。

提供者：这个 NgModule 贡献给全球服务集合的服务的创建者；它们在应用程序的所有部分都可以访问。（您还可以在组件级别指定提供程序，这通常是首选。）

bootstrap：主应用程序视图，称为根组件，它托管所有其他应用程序视图。只有根 NgModule 应该设置引导属性。

于 2018-08-09T04:35:53.227 回答
2

首先，再次阅读https://angular.io/docs/ts/latest/guide/ngmodule.html和绝对https://angular.io/docs/ts/latest/cookbook/ngmodule-faq.html以及。

一个@NgModule 做了所有神奇的设置。它设置依赖注入，引入它使用的任何 3rd 方模块，声明所有组件/指令/管道/等。在模块中使用的组件，将其中一些组件等暴露给其他模块，为模块设置路由，并设置任何可用作根组件的“引导”组件。

有两种类型的模块。首先，有你的 'Root module'，它是你的应用程序的入口点。从技术上讲，您可以将应用程序中的所有内容都放在一个模块中。

然后是“功能模块”，用于在开发过程中分离关注点，也用于延迟加载应用程序的某些部分。对于较大的应用程序来说，这更多是一个问题，但尽早这样做肯定可以帮助您“正确”设置。

于 2016-11-03T06:21:59.570 回答
1

@NgModule是 RC5 中添加的一个新装饰器，它为 Angular 的核心和开发人员人体工程学提供了许多有用的功能。

NgModule 的基本用法如下所示：

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ MyComponent ],
  bootstrap: [ MyComponent ]
})
class MyAppModule {}

这个装饰器告诉 Angular 关于你的应用程序的两件重要的事情：

声明告诉 AngularMyComponent属于MyAppModule.

bootstrap建议 Angular 在启动时创建此模块，并且我们希望自动引导MyComponent到 DOM。

于 2016-11-03T05:51:16.133 回答
0

来自docs

NgModule 是由@NgModule装饰器标记的类。@NgModule接受一个元数据对象，该对象描述如何编译组件的模板以及如何在运行时创建注入器。它通过exports 属性识别模块自己的组件、指令和管道，将其中的一些公开，以便外部组件可以使用它们。@NgModule还可以将服务提供者添加到应用程序依赖注入器。

NgModule 元数据执行以下操作：

  • 声明哪些组件、指令和管道属于该模块。
  • 公开其中一些组件、指令和管道，以便其他模块的组件模板可以使用它们。
  • 使用当前模块中的组件需要的组件、指令和管道导入其他模块。
  • 提供其他应用程序组件可以使用的服务。
于 2018-03-05T13:30:43.997 回答