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

Estoy tratando de entender Angular (a veces llamado Angular2+), entonces me encontré con @Module

  1. Importaciones
  2. Declaraciones
  3. Proveedores

Siguiente Inicio rápido angular

Author: isherwood, 2016-08-21
Source

3 answers

Conceptos angulares

  • imports hace que las declaraciones exportadas de otros módulos estén disponibles en el módulo actual
  • declarations son para hacer que las directivas (incluyendo componentes y tuberías) del módulo actual estén disponibles para otras directivas en el módulo actual. Los selectores de directivas, componentes o canalizaciones solo se comparan con el HTML si se declaran o importan.
  • providers son para dar a conocer servicios y valores a DI. Se añaden a la ámbito raíz y se inyectan a otros servicios o directivas que los tienen como dependencia.

Un caso especial para providers son los módulos de carga lenta que obtienen su propio inyector infantil. providers de un módulo lazy loaded solo se proporcionan a este módulo lazy loaded por defecto (no toda la aplicación como lo es con otros módulos).

Para obtener más detalles sobre los módulos, consulte también https://angular.io/docs/ts/latest/guide/ngmodule.html

  • exports hace los componentes, directivas y canalizaciones disponibles en los módulos que añaden este módulo a imports. exports también se puede usar para reexportar módulos como CommonModule y FormsModule, que a menudo se hace en módulos compartidos.

  • entryComponents registra componentes para la compilación offline para que puedan ser utilizados con ViewContainerRef.createComponent(). Los componentes utilizados en las configuraciones de enrutadores se agregan implícitamente.

TypeScript (ES2015) importaciones

import ... from 'foo/bar' (que puede resolver a una index.ts) son para importaciones de TypeScript. Los necesita cada vez que use un identificador en un archivo typescript que se declare en otro archivo typescript.

Angular @NgModule() imports y TypeScript importson conceptos completamente diferentes.

Véase también jDriven - TypeScript y sintaxis de importación de ES6

La mayoría de ellos son en realidad sintaxis de módulo ECMAScript 2015 (ES6) que TypeScript también usa.

 346
Author: Günter Zöchbauer,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-02-13 13:38:29

imports: se utiliza para importar módulos de soporte como FormsModule, RouterModule, CommonModule o cualquier otro módulo de características personalizado.

declarations: se utiliza para declarar componentes, directivas, tuberías que pertenecen al módulo actual. Todo lo que está dentro de las declaraciones se conoce. Por ejemplo, si tenemos un componente, digamos UsernameComponent, que muestra la lista de los nombres de usuario, y también tenemos una tubería, digamos toupperPipe, que transforma la cadena en cadena de letras mayúsculas. Ahora Si queremos mostrar los nombres de usuario en mayúsculas en nuestro componente de usuario, podemos usar el toupperPipe que habíamos creado antes, pero cómo sabemos que el componente de usuario existe y cómo podemos acceder y usarlo, aquí vienen las declaraciones, podemos declarar el componente de usuario y toupperPipe.

Providers: se utiliza para inyectar los servicios requeridos por componentes, directivas, tuberías en nuestro módulo.

Lea en detalle aquí: https://angular.io/docs/ts/latest/guide/ngmodule.html

 60
Author: Godfather,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-09-06 06:43:58

Se declaran los componentes, se importan los módulos y se proporcionan los Servicios. Un ejemplo con el que estoy trabajando:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';


import { AppComponent } from './app.component';
import {FormsModule} from '@angular/forms';
import { UserComponent } from './components/user/user.component';
import { StateService } from './services/state.service';    

@NgModule({
  declarations: [
    AppComponent,
    UserComponent
  ],
  imports: [
    BrowserModule,
    FormsModule
  ],
  providers: [ StateService ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }
 21
Author: SanSolo,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-04-18 16:48:32