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


Jawaban:


517

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.


1
Saya pikir, tapi saya tidak yakin, bahwa rekomendasi terbaru adalah untuk menempatkan penyedia aplikasi di CoreModule, daripada menggunakan forRoot()dalam modul malas. Apa kamu setuju? Lihat Modul Inti . Tautan ke # shared-module-for-root tidak ada lagi.
Mark Rajcok

1
Penjelasan yang bagus. Terima kasih, @ günter-zöchbauer. Hanya menyebutkan bahwa afaik importadalah fungsionalitas JS (ES2015), bukan salah satu TypeScript. :)
cassi.lup

dan apa ekspor [] di NgModule isap seperti ekspor: [MatCheckBox]
Omar Isaid

4
Sejujurnya, saya pikir desain NgModule of Angular canggung dan tidak jelas dibandingkan dengan Vue dan React . Anda perlu mengimpor modul lain dengan imports, tetapi ekspor deklarabel Anda (komponen, direktif, pipa) dengan exports. Jadi, target utamaimports dan exportshal yang berbeda. Sebaliknya, target utama exportsAnda declarations. Anda mendeklarasikan komponen Anda dengan declarations, tetapi untuk komponen yang dimuat dinamis, Anda perlu memasukkannya entryComponents. Sementara itu, providersdikelola dalam cerita lain oleh DI.
xuemind

2
jawaban berbelit-belit yang menggambarkan kerangka berbelit-belit
Donato

85

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.


3
"deklarasi: digunakan untuk mendeklarasikan komponen, arahan, pipa yang termasuk dalam modul saat ini. Segala sesuatu di dalam deklarasi saling mengenal." ini seharusnya jawaban yang diterima
Deen John

60

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

3
Saya suka kesederhanaan dari penjelasan ini, tetapi membuat saya bertanya-tanya mengapa tidak hanya ada satu properti "stuffsThisComponentNeeds"? Sepertinya mereka semua berurusan dengan hal yang sama, yaitu membuat potongan kode lain tersedia untuk komponen saat ini.
redOktober13

1
@ redOktober13 Saya setuju. Dalam Node.js misalnya, semuanya diimpor dengan cara yang sama terlepas dari apakah itu Model DB, modul, layanan atau paket pihak ke-3 yang diinstal. Dan saya pikir hal yang sama terjadi dengan reactJS
SanSolo

18

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

10

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
Bagaimana dengan ekspor?
lugte098

@ lugte098 Saya telah menambahkan ekspor ke daftar ini
Przemek Struciński

Saya suka tata letak ini karena penjelasannya, sangat mudah dicerna. Terima kasih!
Aaron Jordan

1
  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.
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.