一个 NgModule 与多个 Angular 2

Question

我想知道是创建一个包含我所有 angular 2 代码的单个模块更好，还是将所有内容拆分到多个模块更好。例如，我正在使用 Angular 2 创建我的博客。所以我有一个 "article-list" 组件和一个 "article" 组件。 "article-list" 调用一个服务 returns 文章列表，然后对其执行 "ngFor" 并为每个文章插入一个 "article"。

"article" 组件包含一个 "tag-list" 组件（遵循与 "article-list" 相同的模式，因此我也有一个 "tag" 组件）。现在，一切都在一个模块中，并且工作得很好，但是 here，我可以看到他们为 "heroes" 相关的东西创建了一个模块，但我只是想知道是否真的有必要。

实际上，我并不完全知道创建模块而不是将所有内容都放在主模块中的成本，所以我很难知道我是应该继续使用一个模块还是创建一个 "articles"模块和一个 "tags" 模块。

Answer 1

您应该努力根据您的功能将您的应用程序拆分成模块。

Angular 模块使隔离、测试和重用功能变得更加容易。
Angular 模块使延迟加载可路由功能变得容易。

如果我们坚持使用 Angular 教程示例：将所有英雄分组在 HeroesModule 下，将恶棍分组在 VillainsModule 下是有意义的。其次，如果您有与它们和应用程序中的其他模块相关的通用功能，则可以创建另一个模块，例如CommonModule.

例如，Angular 2 本身附带提供 NgFor 和 NgIf 指令等基本功能的 Common 模块。

Answer 2

是的，您可以将应用程序拆分为多个模块。这将减少应用程序中模块之间的耦合。如果您正在构建大型应用程序，将应用程序划分为功能单元或模块很重要。

比如你的主模块名称是'app.module'

该应用程序由 "Header"、"Home"、...、"Footer" 部分组成。

在 Header 部分您可以创建多个组件。例如。 link（路线）和搜索部分，将其添加到模块 header 中。类似地，Home、Footer 和其他部分包含相关模块。

例如，Home 部分是一个很大的部分，包含许多功能，那么我们可以创建多个模块并注入到 home 主模块中，比如 'home.module'。

下面的代码只是一个示例，展示了如何在 Angular 2.

中实现多个模块

app.module.ts

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


import { AppComponent }   from './app.component';
import { HeaderModule }   from './header.module';

@NgModule({
  imports:      [ 
    BrowserModule,
    HeaderModule
  ],
  declarations: [
    AppComponent,
  ],
  bootstrap: [ AppComponent ]
})

export class AppModule { }

header.module.ts

import { NgModule }      from '@angular/core';
import { CommonModule }  from '@angular/common';
import { FormsModule }   from '@angular/forms';
import { HttpModule } from '@angular/http';

import {
  InputTextModule, 
  ButtonModule,
  DataTableModule,
  SharedModule
} from 'primeng/primeng';

import { HeaderComponent }   from './header.component';
import { UploadFileComponent }   from './upload-file.component';


@NgModule({
  imports:      [
    CommonModule,
    FormsModule,
    HttpModule,
    InputTextModule,
    ButtonModule,
    DataTableModule,
    SharedModule
  ],
  declarations: [
    HeaderComponent,
    UploadFileComponent
  ],
  exports: [ 
    HeaderComponent 
  ]
})

export class HeaderModule { }

Just refer angular2 ngmodule documentation

一个 NgModule 与多个 Angular 2

One single NgModule versus multiples ones with Angular 2

ng-modules

angular