Apa perbedaan antara deklarasi, penyedia, dan impor di NgModule?

Saya mencoba memahami Angular (kadang-kadang disebut Angular2 +), kemudian saya menemukan @Module:

1. Impor

2. Deklarasi

3. Penyedia

Mengikuti Mulai Cepat Sudut

Konsep Sudut

• imports membuat deklarasi yang diekspor dari modul lain tersedia di modul saat ini
• declarationsadalah untuk membuat arahan (termasuk komponen dan pipa) dari modul saat ini tersedia untuk arahan lain dalam modul saat ini. Penyeleksi arahan, komponen atau pipa hanya cocok dengan HTML jika dinyatakan atau diimpor.
• providersadalah untuk membuat layanan dan nilai diketahui oleh DI (injeksi ketergantungan). Mereka ditambahkan ke lingkup root dan mereka disuntikkan ke layanan atau arahan lain yang menjadikannya sebagai ketergantungan.

Kasus khusus untuk providersmodul yang dimuat malas yang mendapatkan injektor anak mereka sendiri.providersdari modul lazy loaded hanya disediakan untuk modul lazy loaded ini (tidak seluruh aplikasi seperti halnya dengan modul lain).

Untuk detail lebih lanjut tentang modul, lihat juga https://angular.io/docs/ts/latest/guide/ngmodule.html

• exportsmembuat komponen, arahan, dan pipa tersedia dalam modul yang menambahkan modul ini imports. exportsjuga dapat digunakan untuk mengekspor kembali modul seperti CommonModule dan FormsModule, yang sering dilakukan dalam modul bersama.

• entryComponents mendaftarkan komponen untuk kompilasi offline sehingga dapat digunakan bersama ViewContainerRef.createComponent() . Komponen yang digunakan dalam konfigurasi router ditambahkan secara implisit.

Impor TypeScript (ES2015)

import ... from 'foo/bar'(yang mungkin berubah menjadiindex.ts berubah ) adalah untuk impor TypeScript. Anda memerlukan ini setiap kali Anda menggunakan pengidentifikasi dalam file naskah yang dinyatakan dalam file naskah lain.

Angular @NgModule() importsdan TypeScript importadalah konsep sama sekali berbeda .

Lihat juga jDriven - sintaks impor TypeScript dan ES6

Sebagian besar dari mereka sebenarnya sintaks modul ECMAScript 2015 (ES6) polos yang menggunakan TypeScript juga.

imports digunakan untuk mengimpor modul pendukung seperti FormsModule, RouterModule, CommonModule, atau modul fitur custom-made lainnya.

declarationsdigunakan untuk mendeklarasikan komponen, arahan, pipa yang termasuk dalam modul saat ini. Semua orang di dalam deklarasi saling kenal. Misalnya, jika kita memiliki komponen, katakanlah UsernameComponent, yang menampilkan daftar nama pengguna dan kami juga memiliki pipa, katakan toupperPipe, yang mengubah string menjadi string huruf besar. Sekarang Jika kita ingin menampilkan nama pengguna dalam huruf besar di UsernameComponent kita maka kita dapat menggunakan toupperPipe yang telah kita buat sebelumnya tetapi pertanyaannya adalah bagaimana UsernameComponent tahu bahwa toupperPipe ada dan bagaimana ia dapat mengakses dan menggunakannya. Di sini deklarasi datang, kita dapat mendeklarasikan UsernameComponent dan toupperPipe.

Providers digunakan untuk menyuntikkan layanan yang dibutuhkan oleh komponen, arahan, pipa dalam modul.

Komponen dideklarasikan, Modul diimpor, dan Layanan disediakan. Contoh yang saya kerjakan:

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

@NgModuleKonstruksi sudut :

1. import { x } from 'y';: Ini adalah sintaks naskah skrip standar ( ES2015/ES6sintaks modul) untuk mengimpor kode dari file lain. Ini bukan spesifik Sudut . Juga ini secara teknis bukan bagian dari modul, hanya perlu untuk mendapatkan kode yang diperlukan dalam lingkup file ini.
2. imports: [FormsModule]: Anda mengimpor modul lain di sini. Misalnya kita mengimpor FormsModuledalam contoh di bawah ini. Sekarang kita bisa menggunakan fungsionalitas yang ditawarkan FormsModule di seluruh modul ini.
3. declarations: [OnlineHeaderComponent, ReCaptcha2Directive]: Anda meletakkan komponen, arahan, dan pipa Anda di sini. Setelah dideklarasikan di sini, Anda sekarang dapat menggunakannya di seluruh modul. Misalnya kita sekarang dapat menggunakan OnlineHeaderComponentdalam AppComponentpandangan (file html). Angular tahu di mana menemukan ini OnlineHeaderComponentkarena dinyatakan dalam @NgModule.
4. providers: [RegisterService]: Di sini layanan kami dari modul khusus ini ditentukan. Anda dapat menggunakan layanan di komponen Anda dengan menyuntikkan dengan dependensi injeksi.

Modul contoh:

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

Menambahkan lembar contekan cepat yang dapat membantu setelah istirahat lama dengan Angular:

PERNYATAAN

Contoh:

declarations: [AppComponent]

Apa yang bisa kita suntikkan di sini? Komponen, pipa, arahan

IMPOR

Contoh:

imports: [BrowserModule, AppRoutingModule]

Apa yang bisa kita suntikkan di sini? modul lainnya

PENYEDIA

Contoh:

providers: [UserService]

Apa yang bisa kita suntikkan di sini? jasa

BOOTSTRAP

Contoh:

bootstrap: [AppComponent]

Apa yang bisa kita suntikkan di sini? komponen utama yang akan dihasilkan oleh modul ini (simpul orangtua atas untuk pohon komponen)

KOMPONEN MASUK

Contoh:

entryComponents: [PopupComponent]

Apa yang bisa kita suntikkan di sini? komponen yang dihasilkan secara dinamis (misalnya dengan menggunakan ViewContainerRef.createComponent ())

EKSPOR

Contoh:

export: [TextDirective, PopupComponent, BrowserModule]

Apa yang bisa kita suntikkan di sini? komponen, arahan, modul atau pipa yang kami ingin memiliki akses ke mereka di modul lain (setelah mengimpor modul ini)

1. deklarasi : Properti ini menceritakan tentang Komponen, Arahan dan Pipa yang termasuk dalam modul ini.
2. ekspor : Subset deklarasi yang harus terlihat dan dapat digunakan dalam templat komponen NgModules lainnya.
3. impor : Modul lain yang kelas ekspornya diperlukan oleh templat komponen yang dideklarasikan dalam NgModule ini.
4. penyedia : Pembuat layanan yang disumbangkan oleh NgModule ini ke koleksi layanan global; mereka dapat diakses di semua bagian aplikasi. (Anda juga dapat menentukan penyedia di tingkat komponen, yang sering lebih disukai.)
5. bootstrap : Tampilan aplikasi utama, disebut komponen root, yang menampung semua tampilan aplikasi lainnya. Hanya root NgModule yang harus mengatur properti bootstrap.