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

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

1. Import

2. Deklaracje

3. Dostawcy

Po Angular Szybki start

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.

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.

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 { }

@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 { }

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)

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.