【问题标题】：Angular2 - How module is different from component?Angular2 - 模块与组件有何不同？
【发布时间】：2018-04-28 15:41:22
【问题描述】：

在下面来自../src/app/app.module.ts的代码中，

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

import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';

组件组成：

查看(../src/app/app.component.html)
逻辑（../src/app/app.component.ts）
风格(../src/app/app.component.css)

Angular 应用程序是一个组件树。好的组件具有高内聚性，即每个组件仅包含具有相关功能的元素。它们也被很好地封装和松散耦合。

模块与组件有何不同？

【问题讨论】：

What's the difference between an Angular component and module的可能重复

标签： javascript angular typescript

【解决方案1】：

组件只是一个带有@Component() 注解的类。请注意，.html 和 .css 文件可能被组件引用，当然不是强制性的。组件模板很可能直接在组件配置中“内联”，或者给定组件可能根本没有任何 html 模板。

模块是 Angular 应用程序（可能还有其他类和接口）的结构元素。它也是带有@NgModule() 注解的“只是一个类”。

它充当您的组件、指令、服务、管道等的逻辑“容器”......以帮助您更好地构建整体源代码。

你可以看看这个现有的问题：What's the difference between an Angular component and module

【讨论】：

【解决方案2】：

模块是具有个组件的东西。它将它们包装起来，以便您可以导入和管理它们。

请注意，当您制作组件时，您可以在构造函数中放置任何装饰为 @Injectable 的内容：

@Component({
  selector: 'app-heroes',
  templateUrl: './heroes.component.html',
  styleUrls: ['./heroes.component.css']
})
export class HeroesComponent implements OnInit {

  constructor(private myService: MyService) { }

  ngOnInit() {
  }

}

神奇的是，您将有一个myService 可以使用。这是依赖注入，它内置在 Angular 中——但它在Module 级别上进行管理。在您的模块中，您导入您希望能够使用的其他模块：

imports: [
  BrowserModule,
  FormsModule
],

定义你的模块包括什么：

declarations: [
  AppComponent,
  HeroesComponent,
  MyService
],

导出任何组件（以便其他模块可以导入它们）

exports: [
  HeroesComponent
],

它们有助于将应用程序组织成功能块。组件是告诉 Angular 如何渲染某些东西的东西。模块将组件、管道、服务等组成“块”，可以通过角度编译或导入并供其他人使用。

编辑地址评论

回答您关于HttpClient 的具体问题。 HttpClient 是您用来执行操作的服务。 HttpClientModule 是您导入模块的模块，因此您可以使用它包含的服务。

你导入模块：

@NgModule({
  imports: [
    BrowserModule,
    // Include it under 'imports' in your application module
    // after BrowserModule.
    HttpClientModule,
  ],
})

并且使用服务：

@Component(...)
export class MyComponent implements OnInit {
 
  // Inject HttpClient into your component or service.
  constructor(private http: HttpClient) {}

  ...
}

HttpClientModule 包含HttpClient 工作所需的所有内容，并将其打包以便您可以在自己的项目中使用它。

这个特定的模块只封装了一个服务，但该模块可以包含一堆相关的服务、组件、管道或指令。例如，RouterModule 允许您使用 RouterOutlet 和 RouterLink 指令。

【讨论】：

Angular2 是否鼓励带有根组件的单页应用程序？
是的。或者可以导入的功能库 - 但导入它的项目很可能是带有根组件的 SPA。
例如：你如何区分HttpClientModule(@angular/common/http) 和HttpClient(@angular/http)？为什么第一个叫做模块？我们都需要http设施。我试图通过这个例子来理解模块的目的
我在答案的编辑中添加了一些解释。
我们已经在app.module.ts中导入了httpclientmodule，为什么还要重新导入httpclient服务呢？模块导入不能提供服务吗？

【解决方案3】：

Module 是 Angular 中的一组组件、服务、过滤器或其他一些较小的模块，或者我们可以说明您将所有这些导入到哪里，以便以后在应用程序中使用以供将来使用。在单个应用程序中可能存在一个或多个模块。

而组件控制称为视图的屏幕区域。您可以在类中定义组件的应用程序逻辑——它支持视图的功能。该类通过属性和方法的 API 与视图交互。

有关详细信息，请参阅本指南：

https://angular.io/guide/architecture

【讨论】：