Angular2 - 模块与组件有何不同？

Question

在以下代码中来自../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';

---

组件包括：

• view（ ../src/app/app.component.html ）

• 逻辑（ ../src/app/app.component.ts ）

• style（ ../src/app/app.component.css ）

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

---

模块与组件有何不同？

Answer 1

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

模块是Angular应用程序（以及其他类和接口）的结构元素。 它也是@NgModule()注释的“只是一个类”。

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

您可以查看这个现有问题： Angular组件和模块之间的区别

Answer 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
],

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

编辑以解决评论

提出有关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指令。

Answer 3

角度模块也是组件，服务，过滤器或其他一些较小模块的集合，或者我们可以说您导入所有这些模块的位置，以便稍后在应用程序中使用以备将来使用。 在单个应用程序中，可能存在一个或多个模块。

然而，A 组件控制称为视图的屏幕补丁。 您可以定义组件的应用程序逻辑 - 它在类中支持视图的作用。 该类通过属性和方法的API与视图交互。

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

https://angular.io/guide/architecture