NgModule中的声明，提供程序和导入之间有什么区别？

让我们首先讨论以下术语：

• 声明：
  • 声明用于声明属于当前模块的组件，指令，管道。
  • 声明中的所有内容都是相互了解的。
  • 声明用于使当前模块中的指令(包括组件和管道)可用于当前模块中的其他指令。
  • 指令，组件或管道的选择器只有在声明或导入时才与HTML匹配。
• 提供者：
  • 提供程序用于使依赖项注入了解服务和值。
  • 它们被添加到根作用域，并且被注入到其他具有它们依赖关系的服务或指令中。
• 进口：
  • 导入使其他模块的导出声明在当前模块中可用。
  • 它用于导入支持的模块，例如FormsModule，RouterModule，CommonModule等。

差异：

Declarations	Providers	Imports
Declarations are used to make directives.	Providers are used to make services.	Imports makes the exported declarations of other modules available in the current module.
Used to declare components, directives, pipes that belongs to the current module.	Used to inject the services required by components, directives, pipes in our module.	Used to import supporting modules likes FormsModule, RouterModule, etc.
Ex. AppComponent.	Ex. StateService.	Ex. BrowserModule.
Defined in Declarations array in @NgModule @NgModule({  declarations: [  ],  )}	Defined in Providers array in @NgModule. @NgModule({ providers: [ ], )}	Defined in imports array in @NgModule. @NgModule({ imports: [], )}

使用所有三个声明，导入和提供程序的示例：

此项目中使用的提供程序是名为UserService的自定义服务。

ng g s User

user.service.ts

javascript

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

此UserService在app.module.ts中用作提供程序。

app.module.ts

javascript

// 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

html

GeeksforGeeks

    
imports in this app: BrowserModule,
      AppRoutingModule, HttpClientModule, FormsModule
    
declarations in this app: AppComponent
    
providers in this app: UserService

输出：