NgModule中的Declarations、Providers和Imports之间有什么区别

让我们首先讨论一下这些术语。

Declarations:
- 声明是用来声明属于当前模块的组件、指令、管道。
- 声明内的一切都相互认识。
- 声明是用来使当前模块中的指令（包括组件和管道）对当前模块中的其他指令可用。
- 指令、组件或管道的选择器只有在它们被声明或导入时才会与HTML匹配。
Providers:
- 提供者是用来使服务和价值为依赖性注入所了解。
- 它们被添加到根作用域中，并被注入到其他以它们为依赖关系的服务或指令中。
Imports:
- Imports使其他模块的出口声明在当前模块中可用。
- 它用于导入支持模块，如FormsModule, RouterModule, CommonModule等。

区别:

Declarations	Providers	Imports
声明是用来做指令的。	提供者用于制作服务。	Imports使其他模块的出口声明在当前模块中可用。
用来声明属于当前模块的组件、指令、管道。	用于在我们的模块中注入组件、指令和管道所需的服务。	用于导入支持模块，如FormsModule、RouterModule等。
应用组件。	StateService	BrowserModule

Declarations

Defined in Declarations array in @NgModule

@NgModule({

 declarations: [  ],

 )}

Providers

Defined in Providers array in @NgModule.

@NgModule({

providers: [ ],

)}

Imports

Defined in imports array in @NgModule.

@NgModule({

imports: [],

)}

一个例子，其中使用了所有三个Declarations，Imports和Providers。

本项目中使用的提供者是名为UserService的自定义服务。

ng g s User

user.service.ts

import { Injectable } from '@angular/core';
 
@Injectable({
  providedIn: 'root'
})
export class UserService {
 
  constructor() { }
}

这个UserService被用作app.module.ts中的提供者。

app.module.ts

// imports for the application
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { FormsModule } from '@angular/forms';
import { AppRoutingModule } from './app-routing.module';
// declarations for the application
import { AppComponent } from './app.component';
// providers for the application
import { UserService } from './user.service';
 
@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    FormsModule
  ],
  providers: [UserService],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.html

<h1>GeeksforGeeks</h1>
<ul>
    <li>imports in this app: BrowserModule,
      AppRoutingModule, HttpClientModule, FormsModule</li>
    <li>declarations in this app: AppComponent</li>
    <li>providers in this app: UserService</li>
</ul>