一个 NgModule 与 Angular 2 的多个 NgModule

2024-02-19

我想知道是否最好创建一个包含所有 Angular 2 代码的单个模块,或者是否最好将所有内容拆分到多个模块中。例如,我正在使用 Angular 2 创建博客。因此我有一个“文章列表”组件和一个“文章”组件。 “article-list”调用一个返回文章列表的服务,然后对其执行“ngFor”并为每一篇插入一个“文章”。

“文章”组件包含一个“标签列表”组件(它遵循与“文章列表”组件相同的模式,因此我还有一个“标签”组件)。目前,所有内容都在一个模块中,并且运行良好,但是here https://angular.io/styleguide#!#04-06,我可以看到他们为“英雄”相关的东西创建了一个模块,但我只是想知道这是否真的有必要。

实际上,我并不完全知道创建模块而不是将所有内容都放在主模块中的成本,所以我很难知道是否应该继续使用一个模块或创建一个“文章”模块和一个“标签”模块。


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

例如,您的主模块名称是“app.module”

该应用程序由“页眉”、“主页”、...、“页脚”部分组成。

在标题部分您可以创建多个组件。例如。链接(路线)和搜索部分,将其添加到模块标题中。同样,主页、页脚和其他部分包含关联的模块。

例如,主页部分是一个很大的部分,包含许多功能,那么我们可以创建多个模块并注入主页主模块,例如“home.module”。

下面的代码只是一个示例,展示了如何在 Angular 2 中实现多个模块。

应用程序模块.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 { }

头文件.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 { }

只需参考 angular2 ngmodule 文档 https://angular.io/docs/ts/latest/guide/ngmodule.html

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

一个 NgModule 与 Angular 2 的多个 NgModule 的相关文章

随机推荐