Próbuję zrozumieć Angular (czasami nazywany Angular2 +), a potem natknąłem się na @Module
:
Import
Deklaracje
Dostawcy
źródło
Próbuję zrozumieć Angular (czasami nazywany Angular2 +), a potem natknąłem się na @Module
:
Import
Deklaracje
Dostawcy
Koncepcje kątowe
imports
udostępnia wyeksportowane deklaracje innych modułów w bieżącym moduledeclarations
mają 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.providers
mają 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 providers
są leniwie załadowane moduły, które mają własne wtryskiwacze potomne. providers
moduł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
exports
udostępnia komponenty, dyrektywy i potoki w modułach, które dodają ten moduł imports
. exports
moż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.
entryComponents
rejestruje 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()
imports
i TypeScript import
to 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.
forRoot()
z leniwie ładowanego modułu. Czy sie zgadzasz? Zobacz moduł podstawowy . Link do # shared-module-for-root już nie istnieje.import
afaik jest funkcją JS (ES2015), a nie TypeScript. :)imports
, ale wyeksportować swoje deklaratory (komponent, dyrektywa, potok) za pomocąexports
. Więc główne celeimports
iexports
są różne rzeczy. Zamiast tego głównym celemexports
jest twójdeclarations
. Deklarujesz swój komponentdeclarations
, ale w przypadku dynamicznie ładowanego komponentu musisz go umieścićentryComponents
. Tymczasemproviders
DI zarządza w innej historii.imports
są używane do importowania modułów obsługujących, takich jak FormsModule, RouterModule, CommonModule lub dowolnego innego niestandardowego modułu funkcji.declarations
sł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.źródło
Składniki są deklarowane, moduły są importowane, a usługi są świadczone. Przykład, z którym pracuję:
źródło
@NgModule
Konstrukcje kątowe :import { x } from 'y';
: Jest to standardowa składnia maszynopisu (składniaES2015/ES6
moduł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.imports: [FormsModule]
: Importujesz tutaj inne moduły. Na przykład importujemyFormsModule
w poniższym przykładzie. Teraz możemy korzystać z funkcjonalności, którą FormsModule ma do zaoferowania w tym module.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ćOnlineHeaderComponent
zAppComponent
widoku (plik HTML). Angular wie, gdzie to znaleźć,OnlineHeaderComponent
ponieważ jest to zadeklarowane w@NgModule
.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ł:
źródło
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)
źródło
źródło