Jaka jest różnica między deklaracjami, dostawcami i importem w NgModule?

387

Próbuję zrozumieć Angular (czasami nazywany Angular2 +), a potem natknąłem się na @Module:

  1. Import

  2. Deklaracje

  3. Dostawcy

Po Angular Szybki start

Ramesh Papaganti
źródło

Odpowiedzi:

516

Koncepcje kątowe

  • imports udostępnia wyeksportowane deklaracje innych modułów w bieżącym module
  • declarationsmają udostępnić dyrektywy (w tym komponenty i rury) z bieżącego modułu innym dyrektywom w bieżącym module. Selektory dyrektyw, komponentów lub potoków są dopasowywane do HTML tylko, jeśli są zadeklarowane lub zaimportowane.
  • providersmają udostępnić usługi i wartości DI (wstrzykiwanie zależności). Są one dodawane do zakresu głównego i są wstrzykiwane do innych usług lub dyrektyw, które mają je jako zależność.

Specjalnym przypadkiem providerssą leniwie załadowane moduły, które mają własne wtryskiwacze potomne. providersmodułu leniwie ładowanego są domyślnie dostarczane tylko do tego modułu leniwie ładowanego (nie cała aplikacja, jak to ma miejsce w przypadku innych modułów).

Aby uzyskać więcej informacji na temat modułów, zobacz także https://angular.io/docs/ts/latest/guide/ngmodule.html

  • exportsudostępnia komponenty, dyrektywy i potoki w modułach, które dodają ten moduł imports. exportsmoże także służyć do ponownego eksportu modułów, takich jak CommonModule i FormsModule, co często odbywa się we współdzielonych modułach.

  • entryComponentsrejestruje komponenty do kompilacji offline, aby można było z nimi korzystać ViewContainerRef.createComponent(). Komponenty używane w konfiguracjach routerów są dodawane niejawnie.

Importowanie TypeScript (ES2015)

import ... from 'foo/bar'(które może rozwiązać na anindex.ts ) są dla importu TypeScript. Potrzebujesz ich za każdym razem, gdy użyjesz identyfikatora w pliku maszynopisu zadeklarowanego w innym pliku maszynopisu.

Angular @NgModule() importsi TypeScript importto zupełnie inne pojęcia .

Zobacz także jDriven - składnia importu TypeScript i ES6

Większość z nich to w rzeczywistości zwykła składnia modułu ECMAScript 2015 (ES6), której używa również TypeScript.

Günter Zöchbauer
źródło
1
Myślę, ale nie jestem pewien, że najnowszą rekomendacją jest umieszczenie dostawców aplikacji w CoreModule, zamiast korzystania forRoot()z leniwie ładowanego modułu. Czy sie zgadzasz? Zobacz moduł podstawowy . Link do # shared-module-for-root już nie istnieje.
Mark Rajcok
1
Doskonałe wyjaśnienie. Dziękuję, @ ​​günter-zöchbauer. Jedyną wzmianką jest to, że importafaik jest funkcją JS (ES2015), a nie TypeScript. :)
cassi.lup
a co to jest eksport [] w NgModule, to jak eksport: [MatCheckBox]
Omar Isaid
4
Szczerze mówiąc, myślę, że projekt NgModule of Angular jest niezdarny i niejasny w porównaniu z Vue i React . Musisz zaimportować inny moduł imports, ale wyeksportować swoje deklaratory (komponent, dyrektywa, potok) za pomocą exports. Więc główne cele importsi exportssą różne rzeczy. Zamiast tego głównym celem exportsjest twój declarations. Deklarujesz swój komponent declarations, ale w przypadku dynamicznie ładowanego komponentu musisz go umieścić entryComponents. Tymczasem providersDI zarządza w innej historii.
xuemind
1
zawiła odpowiedź opisująca zawiły szkielet
Donato,
85

imports są używane do importowania modułów obsługujących, takich jak FormsModule, RouterModule, CommonModule lub dowolnego innego niestandardowego modułu funkcji.

declarationssłużą do deklarowania komponentów, dyrektyw, rur, które należą do bieżącego modułu. Wszyscy w deklaracjach znają się. Na przykład, jeśli mamy składnik, powiedz UsernameComponent, który wyświetla listę nazw użytkowników, a także mamy potok, powiedzmy toupperPipe, który przekształca ciąg znaków na ciąg dużej litery. Teraz, jeśli chcemy wyświetlać nazwy użytkowników dużymi literami w naszym LoginComponent, możemy użyć toupperPipe, który wcześniej stworzyliśmy, ale pytanie brzmi, w jaki sposób UsernameComponent wie, że toupperPipe istnieje oraz w jaki sposób może uzyskać do niego dostęp i z niego korzystać. Nadchodzą deklaracje, możemy zadeklarować UsernameComponent i toupperPipe.

Providers są używane do wstrzykiwania usług wymaganych przez komponenty, dyrektywy, rury w module.

Ojciec chrzestny
źródło
3
„deklaracje: służy do deklarowania komponentów, dyrektyw, potoków, które należą do bieżącego modułu. Wszystko w deklaracjach się zna”. taka powinna być zaakceptowana odpowiedź
Deen John,
60

Składniki są deklarowane, moduły są importowane, a usługi są świadczone. Przykład, z którym pracuję:

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 { }
SanSolo
źródło
3
Podoba mi się prostota tego objaśnienia, ale zastanawiam się, dlaczego nie istnieje tylko jedna właściwość „stuffsThisComponentNeeds”? Wygląda na to, że wszyscy mają do czynienia z tym samym, co sprawia, że ​​inne elementy kodu są dostępne dla bieżącego komponentu.
redOctober13
1
@ redOctober13 Zgadzam się. Na przykład w Node.js wszystko jest importowane w ten sam sposób, niezależnie od tego, czy jest to model DB, moduł, usługa czy zainstalowany pakiet innej firmy. I myślę, że to samo dzieje się z reaktJS
SanSolo,
18

@NgModuleKonstrukcje kątowe :

  1. import { x } from 'y';: Jest to standardowa składnia maszynopisu (składnia ES2015/ES6modułu) do importowania kodu z innych plików. To nie jest specyficzne dla Angulara . Nie jest to technicznie część modułu, konieczne jest tylko uzyskanie wymaganego kodu w zakresie tego pliku.
  2. imports: [FormsModule]: Importujesz tutaj inne moduły. Na przykład importujemy FormsModulew poniższym przykładzie. Teraz możemy korzystać z funkcjonalności, którą FormsModule ma do zaoferowania w tym module.
  3. declarations: [OnlineHeaderComponent, ReCaptcha2Directive]: Umieszczasz tutaj swoje komponenty, dyrektywy i rury. Po zadeklarowaniu tutaj możesz ich używać w całym module. Na przykład możemy teraz korzystać OnlineHeaderComponentz AppComponentwidoku (plik HTML). Angular wie, gdzie to znaleźć, OnlineHeaderComponentponieważ jest to zadeklarowane w @NgModule.
  4. providers: [RegisterService]: Tutaj zdefiniowane są nasze usługi tego konkretnego modułu. Możesz korzystać z usług w swoich komponentach, wstrzykując z zastrzykiem zależności.

Przykładowy moduł:

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

// Components
import { AppComponent } from './app.component';
import { OfflineHeaderComponent } from './offline/offline-header/offline-header.component';
import { OnlineHeaderComponent } from './online/online-header/online-header.component';

// Services
import { RegisterService } from './services/register.service';

// Directives
import { ReCaptcha2Directive } from './directives/re-captcha2.directive';

@NgModule({
  declarations: [
    OfflineHeaderComponent,,
    OnlineHeaderComponent,
    ReCaptcha2Directive,
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
  ],
  providers: [
    RegisterService,
  ],
  entryComponents: [
    ChangePasswordComponent,
    TestamentComponent,
    FriendsListComponent,
    TravelConfirmComponent
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }
Willem van der Veen
źródło
10

Dodanie szybkiego ściągawki, które może pomóc po długiej przerwie z Angularem:


DEKLARACJE

Przykład:

declarations: [AppComponent]

Co możemy tu wstrzyknąć? Komponenty, rury, dyrektywy


IMPORT

Przykład:

imports: [BrowserModule, AppRoutingModule]

Co możemy tu wstrzyknąć? inne moduły


DOSTAWCY

Przykład:

providers: [UserService]

Co możemy tu wstrzyknąć? usługi


BOOTSTRAP

Przykład:

bootstrap: [AppComponent]

Co możemy tu wstrzyknąć? główny komponent, który zostanie wygenerowany przez ten moduł (górny węzeł nadrzędny dla drzewa komponentów)


WEJŚCIE DO SKŁADNIKÓW

Przykład:

entryComponents: [PopupComponent]

Co możemy tu wstrzyknąć? komponenty generowane dynamicznie (na przykład za pomocą ViewContainerRef.createComponent ())


EKSPORT

Przykład:

export: [TextDirective, PopupComponent, BrowserModule]

Co możemy tu wstrzyknąć? komponenty, dyrektywy, moduły lub potoki, do których chcielibyśmy mieć dostęp w innym module (po zaimportowaniu tego modułu)

Przemek Struciński
źródło
1
Co z eksportem?
lugte098,
@ lugte098 Dodałem eksport do tej listy
Przemek Struciński,
Uwielbiam ten układ za wyjaśnienie, bardzo strawny. Dzięki!
Aaron Jordan
1
  1. deklaracje : ta właściwość mówi o komponentach, dyrektywach i rurach należących do tego modułu.
  2. eksport : Podzbiór deklaracji, które powinny być widoczne i przydatne w szablonach komponentów innych modułów NgModuł.
  3. import : inne moduły, których eksportowane klasy są potrzebne w szablonach komponentów zadeklarowanych w tym module NgModule.
  4. dostawcy : twórcy usług, które ten moduł NgModule przyczynia się do globalnego gromadzenia usług; stają się dostępne we wszystkich częściach aplikacji. (Możesz także określić dostawców na poziomie komponentu, co jest często preferowane).
  5. bootstrap : główny widok aplikacji, zwany składnikiem głównym, który obsługuje wszystkie inne widoki aplikacji. Tylko główny NgModule powinien ustawić właściwość bootstrap.
wagon jogurtowy
źródło