Quelle est la différence entre les déclarations, les fournisseurs et l'importation dans NgModule
j'essaie de comprendre angulaire (parfois appelé Angular2+), puis je suis tombé sur @Module
- Importations
- déclarations
- Fournisseurs
Suivant Démarrage Rapide Angulaire
3 réponses
Angulaire Concepts
-
importsrend les déclarations exportées d'autres modules disponibles dans le module actuel -
declarationsdoivent mettre les directives (y compris les composants et les tuyaux) du module courant à la disposition des autres directives du module courant. Les sélecteurs de directives, de composants ou de pipes ne sont appariés avec le HTML que s'ils sont déclarés ou importés. -
providerssont à rendre les services et les valeurs connues de DI. Ils sont ajoutés à la portée fondamentale et ils sont injectés dans d'autres services ou directives qui les ont comme dépendance.
un cas spécial pour providers sont des modules chargés paresseux qui obtiennent leur propre injecteur enfant. providers d'un module chargé paresseux ne sont fournis à ce module chargé paresseux que par défaut (pas l'ensemble de l'application comme c'est le cas avec les autres modules).
pour plus de détails sur les modules, voir aussi https://angular.io/docs/ts/latest/guide/ngmodule.html
-
exportsrend les composants, les directives et les pipes disponibles dans les modules qui ajoutent ce module àimports.exportspeut également être utilisé pour réexporter des modules tels que CommonModule et FormsModule, ce qui se fait souvent dans des modules partagés. -
entryComponentsenregistre les composants pour la compilation hors ligne afin qu'ils puissent être utilisés avecViewContainerRef.createComponent(). Les composants utilisés dans les configurations de routeur sont ajoutés implicitement.
Tapuscrit (ES2015) importations de
import ... from 'foo/bar' (que peut résoudre à un index.ts ) sont pour les importations dactylographiées. Vous en avez besoin chaque fois que vous utilisez un identifiant dans un fichier déclaré dans un autre fichier dactylographié.
Angulaire @NgModule() imports et Tapuscrit import sont entièrement différents concepts de .
Voir aussi jDriven - Tapuscrit et ES6 importation syntaxe
la plupart d'entre eux sont en fait la syntaxe simple du module ECMAScript 2015 (ES6) qui est aussi utilisée dans les scripts.
imports : est utilisé pour importer des modules de support comme FormsModule, RouterModule, CommonModule, ou tout autre module de fonctionnalité sur mesure.
declarations : est utilisé pour déclarer les composants, les directives, les tuyaux qui appartiennent au module courant. Tout ce qui est dans les déclarations se connaît. par exemple, si nous avons un component, disons UsernameComponent, qui affiche la liste des noms d'utilisateurs, et nous avons aussi un pipe, disons toupperPipe, qui transforment la chaîne en chaîne de lettres majuscules. Maintenant, si nous voulons montrer les noms d'utilisateur en lettres majuscules dans notre UsernameComponent, nous pouvons utiliser le toupperPipe que nous avions créé avant mais comment UsernameComponent savent que le toupperPipe existent et comment nous pouvons y accéder et l'utiliser, voici les déclarations, nous pouvons déclarer UsernameComponent et toupperPipe.
Providers : est utilisé pour injecter les services requis par les composants, directives, pipes dans notre module.
lire en détail ici: https://angular.io/docs/ts/latest/guide/ngmodule.html
sont déclarés, les Modules importés et les Services fournis. Un exemple avec lequel je travaille:
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 { }