angular - Angular 中的 @NgModule 实际上是什么？

Question

我是 Angular 2 的新手。

Angular 2 中的 @NgModule 是什么？我引用了 Angular 的官方文档。但我没有任何清晰度。

Answer 1

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

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

假设您的应用程序有两个主要部分 - 愿望 list 和购物车。您可以为它们中的每一个创建模块 - 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 将您所有的愿望 list 代码放在哪里。模块就在组件的下面，如果你想使用外部组件，那么你只能通过导入它的模块来实现，就像 Java 类和方法一样。