Angular 组件和模块有啥区别

Posted 2023-02-22

【中文标题】Angular 组件和模块有啥区别

【英文标题】：What's the difference between an Angular component and moduleAngular 组件和模块有什么区别

【发布时间】：2017-02-25 16:51:47

【问题描述】：

我一直在看视频和阅读文章，但这个 specific article 让我很困惑，在文章的开头它说

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

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

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

它们是可交换的条款吗？组件是模块吗？但反过来不行？

【参考方案1】：

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

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

【参考方案2】：

好吧，现在发布答案为时已晚，但我觉得我的解释对于 Angular 初学者来说很容易理解。以下是我在演示过程中给出的示例之一。

将您的 Angular 应用程序视为建筑物。一栋建筑中可以有N 数量的公寓。公寓被视为一个模块。然后，一个 Apartment 可以拥有 N 个房间，这些房间对应于名为 components 的 Angular 应用程序的构建块。

现在每个公寓（模块）将有房间（组件）、电梯（服务）以实现更大的进出公寓、电线（管道）转换并使其在公寓中有用。

您还将拥有所有建筑物居民共享的游泳池、网球场等场所。所以这些可以被认为是 SharedModule 中的组件。

基本上区别如下，

这是我在Building Blocks of Angular for beginners上的会话

按照我的幻灯片了解building blocks of an Angular application

【讨论】：

一个非常简单又很好的例子。但是有一件事让我再次感到困惑，你说管道在数据周围移动（传输），对吗？据我所知，管道是用来转换数据的。

没错，可能是编辑后的答案改变了。谢谢提醒！

管道类比仍然是错误的（转换 = 改变）。我会说 Pipes 就像大楼里的厨房，在那里你可以将原料（原始数据）变成你想要的不同种类的食物（煮熟的、胡椒粉的、油炸的、烘焙的等）。或者您可以说管道就像建筑物中的车间，您可以在其中使用不同的自动化机器根据需要轻松修改您的对象 - 将它们放入并修改出来:)

@Prid 感谢您分享您的想法！随意修改答案

这确实是一个很好的类比。只是，这如何与模块和组件的模块化和嵌套一起工作？你有公寓里面的公寓还是房间里面的房间？

【参考方案3】：

最简单的解释：

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

一个组件包含：

HTML 模板或 HTML 代码

代码（打字稿）

服务：它是由组件共享的可重用代码，以便 不需要重写代码

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

参考： https://scrimba.com/

【讨论】：

对这一切并不疯狂。是的，您的组件将使用服务，但该服务必须在模块中的 providers 数组中指明。你的图表没有显示这个。

我可以在一个组件中添加一个子模块并将几个组件添加到该模块中吗？

这是不对的。一个组件包含一个模板 (html)、样式 (css/less/scss)、一个控制器 (typescript) 和一个用于测试的规范文件 (typescript)。它使用与组件在同一模块内或由另一个模块导出的管道或服务。

【参考方案4】：

角度组件

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

import  Component  from '@angular/core';

并创建一个组件

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

要在此处创建组件或 Angular 应用程序是 tutorial

角度模块

angular module 是一组有角度的基本构建块，例如 component、directives、services 等。一个应用可以有多个模块。

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

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

【参考方案5】：

一张图胜过千言万语！

Angular 的概念非常简单。它建议用“砖块”“构建”一个应用程序 -> modules.

这个概念可以更好地构建代码结构并促进重用和共享。

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

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

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

2- 定义它们的依赖关系

3- 定义它们的可见性。

一个 Angular 模块简单地用一个类（通常是空的）和 NgModule 装饰器来定义。

【参考方案6】：

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

Angular 2 中的组件是您为要显示的页面编写逻辑的类。组件控制视图 (html)。组件与其他组件和服务进行通信。

【参考方案7】：

组件是the template(view) + a class (Typescript code) containing some logic for the view + metadata(to tell angular about from where to get data it needs to display the template)。

模块basically group the related components, services together 这样您就可以拥有可以独立运行的功能块。例如，一个应用程序可以具有功能模块，用于为应用程序的特定功能（例如仪表板）分组组件，您可以简单地在另一个应用程序中抓取和使用它。