NgModule'de bildirimler, sağlayıcılar ve içe aktarma arasındaki fark nedir?

Angular'ı (bazen Angular2 + olarak adlandırılır) anlamaya çalışıyorum, sonra karşılaştım @Module:

1. ithalat

2. Beyannameler

3. Sağlayıcıları

Açısal Hızlı Başlat'ı Takip Etme

Açısal Kavramlar

• imports diğer modüllerin dışa aktarılan bildirimlerini geçerli modülde kullanılabilir hale getirir
• declarationsgeçerli modülün yönergelerini (bileşenler ve borular dahil) geçerli modülün diğer yönergelerine sunmasını sağlamaktır. Direktiflerin, bileşenlerin veya kanalların seçicileri HTML ile yalnızca bildirilir veya içe aktarılırsa eşleştirilir.
• providersDI (bağımlılık enjeksiyonu) tarafından bilinen hizmetler ve değerler yapmaktır. Kök kapsamına eklenirler ve bağımlılıkları olan diğer hizmetlere veya direktiflere enjekte edilirler.

Özel bir durum providers, kendi çocuk enjektörlerini alan tembel yüklü modüllerdir. providersTembel yüklü bir modülün varsayılan olarak bu tembel yüklü modüle varsayılan olarak sağlanır (diğer modüllerde olduğu gibi tüm uygulama değil).

Modüller hakkında daha fazla bilgi için ayrıca bkz. Https://angular.io/docs/ts/latest/guide/ngmodule.html

• exportsbileşenleri, yönergeleri ve boruları bu modülü ekleyen modüllerde kullanılabilir hale getirir imports. exportsgenellikle paylaşılan modüllerde yapılan CommonModule ve FormsModule gibi modüllerin yeniden dışa aktarılması için de kullanılabilir.

• entryComponentsile birlikte kullanılabilmeleri için bileşenleri çevrimdışı derleme için kaydeder ViewContainerRef.createComponent(). Yönlendirici yapılandırmalarında kullanılan bileşenler örtülü olarak eklenir.

TypeScript (ES2015) içe aktarma

import ... from 'foo/bar'( çözümlenebilir birindex.ts ) TypeScript içe aktarma içindir. Başka bir daktilo dosyasında bildirilen bir daktilo dosyasında bir tanımlayıcı kullandığınızda bunlara ihtiyacınız vardır.

Açısal en @NgModule() importsve typescript importolan tamamen farklı kavramlar .

Ayrıca bkz. JDriven - TypeScript ve ES6 içe aktarma sözdizimi

Çoğu, TypeScript'in kullandığı düz ECMAScript 2015 (ES6) modülü sözdizimidir.

imports FormsModule, RouterModule, CommonModule veya herhangi bir özel yapım özellik modülü gibi destek modüllerini içe aktarmak için kullanılır.

declarationsgeçerli modüle ait bileşenleri, yönergeleri ve boruları bildirmek için kullanılır. Beyannameler içindeki herkes birbirini tanıyor. Örneğin, bir bileşenimiz varsa, kullanıcı adlarının bir listesini görüntüleyen UsernameComponent deyin ve bir de pipetimiz var, dize büyük harfli bir dize dönüştüren toupperPipe deyin. Şimdi kullanıcı adlarını UsernameComponent'imizde büyük harflerle göstermek istiyorsak, daha önce oluşturduğumuz toupperPipe'ı kullanabiliriz, ancak şu soru da UsernameComponent'in toupperPipe'ın var olduğunu ve buna nasıl erişip kullanabileceğini sormasıdır. İşte bildirimler geliyor, UsernameComponent ve toupperPipe bildirebiliriz.

Providers modüldeki bileşenlerin, direktiflerin ve boruların gerektirdiği hizmetleri enjekte etmek için kullanılır.

Bileşenler bildirilir, Modüller içe aktarılır ve Hizmetler sağlanır. Çalıştığım bir örnek:

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

Açısal @NgModuleyapılar:

1. import { x } from 'y';: Bu, ES2015/ES6diğer dosyalardan kod içe aktarmak için standart dizgi sözdizimidir ( modül sözdizimi). Bu Açısal özel değildir . Ayrıca bu teknik olarak modülün bir parçası değildir, sadece gerekli kodun bu dosya kapsamında olması gerekir.
2. imports: [FormsModule]: Diğer modülleri buraya aktarıyorsunuz. Örneğin FormsModule, aşağıdaki örnekte içe aktarıyoruz. Artık FormsModule'un bu modül boyunca sunduğu işlevselliği kullanabiliriz.
3. declarations: [OnlineHeaderComponent, ReCaptcha2Directive]: Bileşenlerinizi, direktiflerinizi ve borularınızı buraya koydunuz. Burada ilan edildikten sonra, şimdi tüm modül boyunca kullanabilirsiniz. Örneğin artık kullanabilirsiniz OnlineHeaderComponentiçinde AppComponentgörünümü (html dosyası). Açısal bunu nerede bulacağını biliyor OnlineHeaderComponentçünkü @NgModule.
4. providers: [RegisterService]: Burada bu özel modülün hizmetlerimiz tanımlanmıştır. Bağımlılık enjeksiyonu ile enjekte ederek bileşenlerinizdeki servisleri kullanabilirsiniz.

Örnek modül:

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

Angular ile uzun aradan sonra yardımcı olabilecek hızlı bir hile sayfası ekleme:

BEYANNAME

Misal:

declarations: [AppComponent]

Buraya ne enjekte edebiliriz? Bileşenler, borular, yönergeler

İTHALAT

Misal:

imports: [BrowserModule, AppRoutingModule]

Buraya ne enjekte edebiliriz? diğer modüller

SAĞLAYICILAR

Misal:

providers: [UserService]

Buraya ne enjekte edebiliriz? Hizmetler

BOOTSTRAP

Misal:

bootstrap: [AppComponent]

Buraya ne enjekte edebiliriz? bu modül tarafından oluşturulacak ana bileşen (bir bileşen ağacı için üst üst düğüm)

GİRİŞ BİLEŞENLERİ

Misal:

entryComponents: [PopupComponent]

Buraya ne enjekte edebiliriz? dinamik olarak oluşturulan bileşenler (örneğin ViewContainerRef.createComponent () kullanarak)

İHRACAT

Misal:

export: [TextDirective, PopupComponent, BrowserModule]

Buraya ne enjekte edebiliriz? başka bir modülde bunlara erişmek istediğimiz bileşenler, yönergeler, modüller veya borular (bu modülü içe aktardıktan sonra)

1. bildirimler : Bu özellik, bu modüle ait Bileşenler, Yönergeler ve Borular hakkında bilgi verir.
2. ihracat : Diğer NgModules bileşen şablonlar görünür ve kullanılabilir olmalıdır beyanların alt kümesi.
3. içe aktarma: Dışa aktarılan sınıfları bu NgModule'da bildirilen bileşen şablonları için gerekli olan diğer modüller.
4. sağlayıcılar : Bu NgModule'ün küresel hizmet koleksiyonuna katkıda bulunduğu hizmetlerin yaratıcıları; uygulamanın tüm bölümlerinde erişilebilir hale gelirler. (Ayrıca sağlayıcıları bileşen düzeyinde de belirtebilirsiniz, bu genellikle tercih edilir.)
5. bootstrap : Tüm diğer uygulama görünümlerini barındıran kök bileşen adı verilen ana uygulama görünümü. Bootstrap özelliğini yalnızca root NgModule ayarlamalıdır.