¿Cuál es la diferencia entre declaraciones, proveedores e importación en NgModule?

Primero discutamos sobre estos términos:

  • Declaraciones: 
    • Las declaraciones se utilizan para declarar componentes, directivas, tuberías que pertenecen al módulo actual. 
    • Todo lo que está dentro de las declaraciones se conoce entre sí.
    • Las declaraciones se utilizan para hacer que las directivas (incluidos los componentes y las tuberías) del módulo actual estén disponibles para otras directivas del módulo actual.
    • Los selectores de directivas, componentes o conductos solo se comparan con el HTML si se declaran o importan.
  • Proveedores: 
    • Los proveedores se utilizan para dar a conocer los servicios y valores a la inyección de dependencia .
    • Se añaden al ámbito raíz y se inyectan a otros servicios o directivas que los tengan como dependencia.
  • Importaciones:
    • Importaciones hace que las declaraciones exportadas de otros módulos estén disponibles en el módulo actual.
    • Se utiliza para importar módulos de soporte como FormsModule, RouterModule, CommonModule, etc.

Diferencias:

Declaraciones

Proveedores

Importaciones

Las declaraciones se utilizan para hacer directivas. Los proveedores se utilizan para hacer servicios. Importaciones hace que las declaraciones exportadas de otros módulos estén disponibles en el módulo actual.
Se utiliza para declarar componentes, directivas, tuberías que pertenecen al módulo actual. Se utiliza para inyectar los servicios requeridos por componentes, directivas, tuberías en nuestro módulo. Se utiliza para importar módulos de soporte como FormsModule, RouterModule, etc.
Ex. Componente de la aplicación. Ex. Servicio Estatal. Ex. Módulo de navegador.

Definido en la array Declaraciones en @NgModule

@NgModule({

 declaraciones: [ ],

 )}

Definido en la array de proveedores en @NgModule.

@NgModule({

proveedores: [ ],

)}

Definido en la array de importaciones en @NgModule.

@NgModule({

importaciones: [],

)}

Un ejemplo en el que se utilizan las tres declaraciones , importaciones y proveedores :

Los proveedores utilizados en este proyecto son un servicio personalizado llamado UserService.

ng g s User

usuario.servicio.ts

javascript

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

Este UserService se utiliza como proveedor en app.module.ts.

aplicación.módulo.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 { }

aplicación.componente.html

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>

Producción:

Publicación traducida automáticamente

Artículo escrito por taran910 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *