Angular组件和模块有什么区别？

Question

我一直在观看视频和阅读文章，但这篇特定的文章让我感到困惑，在文章开头它说：

Angular中的应用程序遵循模块化结构。 Angular应用程序将包含许多模块，每个模块都专门用于单个目的。通常，模块是一组紧密集成的代码，与其他模块集成以运行您的Angular应用程序。

一个模块从其代码中导出一些类，函数和值。 组件是Angular的基本块，多个组件将组成您的应用程序。

一个模块可以是另一个模块的库。例如，angular2/core库是一个主要的Angular库模块，将被另一个组件导入。

它们是否可以互换使用？ 组件是模块吗？ 但反之则不是吗？

回答：组件不是模块，但模块可以包含组件。在Angular中，组件表示用户界面（UI）的一部分，而模块则代表功能区域。模块可以包含一个或多个组件，并且可以包含提供应用程序所需服务的提供者。因此，组件和模块在Angular应用程序中具有不同的角色和功能。

- Luis Pena

Answer 1

组件控制视图（html）。它们还与其他组件和服务通信，为您的应用程序带来功能。

模块由一个或多个组件组成。它们不控制任何html。您的模块声明了哪些组件可以被属于其他模块的组件使用，哪些类将受到依赖注入器注入，以及哪个组件将被引导。模块允许您管理组件，为您的应用程序带来模块化。

- Sefa

Answer 2

虽然回答已经晚了，但我觉得我的解释对于初学 Angular 的人来说很容易理解。以下是我在演示中提供的一个例子。

将你的 Angular 应用程序视为一栋建筑物。一栋建筑物可以有 N 个公寓。公寓被认为是模块。每个公寓可以有 N 个房间，这些房间对应于名为组件的 Angular 应用程序的构建块。

现在每个公寓（模块）都会有房间（组件）、电梯（服务）以便更大范围地进出公寓，电线（管道）则可以在公寓内转换并使其有用。

你还会有像游泳池、网球场这样的共享场所。因此，这些可以被视为 SharedModule 中的组件。

基本上，它们之间的区别如下所示：

这是我的 Angular 初学者的构建块 会议。

请查看我的幻灯片，了解 Angular 应用程序的 构建块

- Sajeetharan

---

一个非常简单而好的例子。但有一件事情又让我感到困惑，你说管道可以移动数据（运输），这正确吗？据我所知，管道是用于转换数据的。 - Sayed Uz Zaman

没错，也许由于修改后的答案而发生了变化。谢谢提醒！ - Sajeetharan

“管道类比仍然是错误的（transform = change）。我会说，管道就像建筑物中的厨房，在那里您可以将原材料（原始数据）转化为所需的各种食物（煮熟、加胡椒粉、油炸、烘烤等）。或者你可以说，管道就像建筑物中的车间，在那里您可以使用不同的自动机器轻松地修改您的对象——把它们放进去，得到修改后的输出 :)” - Prid

@Prid，感谢分享你的想法！请随意修改答案。 - Sajeetharan

总的来说，这是一个不错的比喻。但是，如何将其应用于模块化和嵌套模块和组件呢？你是否有公寓内部还有公寓或房间内部还有房间的情况？ - Michael S.

@MichaelS. 在这种情况下，您可以考虑使用分区。 - Sajeetharan

Answer 3

简单解释：

模块就像一个大容器，其中包含一个或多个小容器，称为组件、服务、管道。

组件包含:

• HTML 模板或代码

• 代码（TypeScript）

• 服务：可重用的代码，由组件共享，以避免需要重新编写代码

• 管道：它将数据作为输入并将其转换为所需的输出

参考链接：https://scrimba.com/

- wins999

---

不太喜欢这一切。是的，您的组件将使用一个服务，但该服务必须在模块中的提供者数组中指定。您的图表没有显示这一点。 - Scott

我可以在组件内添加子模块和多个组件到该模块中吗？ - Satrughna

这不对。一个组件包含一个模板（html）、样式（css/less/scss）、一个控制器（typescript）和一个用于测试的规范文件（typescript）。它使用一个管道或服务，该管道或服务位于与组件相同的模块中或由另一个模块导出。 - lorless

Answer 4

Angular组件

组件是Angular应用程序的基本构建块之一。一个应用程序可以有多个组件。在普通应用程序中，组件包含HTML视图页面类文件、控制HTML页面行为的类文件和用于为HTML视图设置样式的CSS/scss文件。可以使用@angular/core模块中的@Component装饰器创建组件。

import { Component } from '@angular/core';

并创建一个组件

@Component({selector: 'greet', template: 'Hello {{name}}!'})
class Greet {
  name: string = 'World';
}

要创建一个组件或 Angular 应用，请参考教程。

Angular 模块

Angular 模块是一组 Angular 基本构建块，如组件、指令、服务等。应用程序可以有多个模块。

可以使用 @NgModule 装饰器创建模块。

@NgModule({
  imports:      [ BrowserModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

- Sunil Garg

Answer 5

一张图片胜过千言万语！

Angular的概念非常简单。它提出用模块来“构建”应用程序的“砖块”。

这个概念使得代码更好地结构化，并且更容易实现重用和分享。

请注意，不要将Angular模块与ES2015/TypeScript模块混淆。

关于Angular模块，它是一个机制，用于：

1- 组合组件（还有服务、指令、管道等）

2- 定义它们的依赖项

3- 定义它们的可见性。

Angular模块只需使用类（通常为空）和NgModule修饰符定义即可。

- François

---

Angular用组件构建Web应用程序。 - Andrew Koper

Answer 6

Angular 2 中的模块是由组件、指令、服务等构成的东西。一个或多个模块组合在一起形成一个应用程序。模块将应用程序分解为逻辑代码块。每个模块执行单一任务。

Angular 2 中的组件是你编写要显示的页面逻辑的类。组件控制视图（HTML）。组件与其他组件和服务进行通信。

- Jayani Sumudini

Answer 7

组件是一个模板(view)，加上一个包含一些逻辑的类(Typescript代码)和元数据（告诉 Angular 从哪里获取需要显示到模板上的数据）。

模块基本上将相关的组件和服务分组在一起，以便您可以拥有可以独立运行的功能块。例如，应用程序可以为特性设置模块，为您的应用程序的某个特定功能组件进行分组，例如仪表板，您可以在另一个应用程序中轻松获取并使用它们。

- Daksh