编辑以发表评论

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';

组件包括：

视图（../src/app/app.component.html）
逻辑（../src/app/app.component.ts）
式（../src/app/app.component.css）

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

模块与组件有何不同？

Answer 1

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

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

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

您可以查看此现有问题：What's the difference between an Angular component and module

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

angular中的

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

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

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

https://angular.io/guide/architecture

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

3 个答案:

编辑以发表评论