Pemahaman mendalam tentang corak suntikan kebergantungan dalam Angular (kes mainan)

Artikel ini akan memberi anda pemahaman yang mendalam tentang mod suntikan kebergantungan dalam Sudut, dan berkongsi kes aplikasi dan permainan bagi mod suntikan kebergantungan.

1 Suntikan, mod komunikasi peringkat pokok komponen & corak reka bentuk

1.1 Mod komunikasi komponen

Dalam pembangunan projek Angular, kami biasanya menggunakan pengikatan sifat Input dan pengikatan peristiwa Output untuk komunikasi komponen Walau bagaimanapun, Input dan Output hanya boleh menghantar maklumat antara komponen induk dan anak. Komponen membentuk pepohon komponen berdasarkan hubungan panggilan Jika terdapat hanya pengikatan harta dan pengikatan peristiwa, maka dua komponen perhubungan bukan langsung perlu berkomunikasi melalui setiap titik sambungan itu sendiri tidak perlu tahu maklumat (Rajah 1 kiri). Perkhidmatan Suntikan yang disediakan dalam Angular boleh disediakan dalam modul, komponen atau arahan, dan digabungkan dengan suntikan dalam pembina, boleh menyelesaikan masalah ini (betul-betul dalam Rajah 1). [Cadangan tutorial berkaitan: "tutorial sudut"]

Rajah 1 Mod komunikasi Komponen

Gambar kiri hanya menghantar maklumat melalui ibu bapa -komponen anak , nod a dan nod b perlu berkomunikasi melalui banyak nod; jika nod c ingin mengawal nod b melalui beberapa konfigurasi, nod di antara mereka juga mesti menetapkan atribut atau peristiwa tambahan untuk menghantar maklumat yang sepadan dengan telus. Dalam mod suntikan kebergantungan di sebelah kanan, nod c boleh menyediakan perkhidmatan untuk nod a dan b untuk berkomunikasi secara langsung dengan perkhidmatan yang disediakan oleh nod c, dan nod b juga berkomunikasi secara langsung dengan perkhidmatan yang disediakan oleh nod c , komunikasi dipermudahkan, dan tengah Nod tidak digabungkan dengan bahagian kandungan ini, dan tidak mempunyai kesedaran yang jelas tentang komunikasi yang berlaku antara komponen atas dan bawah.

1.2 Melaksanakan Penyongsangan Kawalan menggunakan Suntikan Ketergantungan

Suntikan Ketergantungan (DI) bukan unik untuk Angular, ia adalah satu cara untuk melaksanakan Inversion of Control (IOC) corak reka bentuk , Kemunculan suntikan kebergantungan menyelesaikan masalah gandingan berlebihan instantiasi manual Semua sumber tidak diuruskan oleh kedua-dua pihak menggunakan sumber, tetapi disediakan oleh pusat sumber atau pihak ketiga, yang boleh membawa banyak faedah. Pertama, pengurusan sumber berpusat menjadikan sumber boleh dikonfigurasikan dan mudah diurus. Kedua, ia mengurangkan tahap pergantungan antara kedua-dua pihak menggunakan sumber, yang kita panggil gandingan.

Satu analogi dengan dunia sebenar ialah apabila kita membeli produk seperti pensel, kita hanya perlu mencari kedai untuk membeli produk jenis pensel Kita tidak kisah di mana pensel itu dihasilkan . Kayu dan plumbum pensel adalah kedua-duanya Bagaimana ia diikat? Bagi kedai, ia boleh pergi ke saluran yang sesuai untuk membeli pensel dan menyedari kebolehkonfigurasian sumber.

Digabungkan dengan senario pengekodan, lebih khusus lagi, pengguna tidak perlu membuat kejadian (operasi baharu) secara eksplisit untuk menyuntik dan menggunakan tika Penciptaan kejadian ditentukan oleh pembekal. Pengurusan sumber adalah melalui token Memandangkan ia tidak mengambil berat tentang penyedia atau penciptaan contoh, pengguna boleh menggunakan beberapa kaedah suntikan tempatan (konfigurasi sekunder token) untuk akhirnya mencapai penggantian contoh dan mod suntikan kebergantungan (AOP ) saling melengkapi.

2 Suntikan Ketergantungan dalam Sudut

Suntikan Ketergantungan ialah salah satu modul teras terpenting bagi rangka Sudut bukan sahaja menyediakan suntikan jenis Perkhidmatan, tetapi juga komponen pokok itu sendiri Ia adalah pokok pergantungan suntikan, dan fungsi dan nilai juga boleh disuntik. Maksudnya, dalam rangka kerja Angular, komponen anak boleh menyuntik contoh komponen induk melalui token komponen induk (biasanya nama kelas). Dalam pembangunan perpustakaan komponen, terdapat sejumlah besar kes di mana interaksi dan komunikasi dicapai dengan menyuntik komponen induk, termasuk pemasangan parameter, perkongsian keadaan, dan juga mendapatkan DOM nod di mana komponen induk berada, dsb.

2.1 Peleraian kebergantungan

Untuk menggunakan suntikan Sudut, anda mesti memahami proses penyelesaian suntikannya terlebih dahulu. Sama seperti proses penghuraian node_modules, apabila tiada kebergantungan ditemui, kebergantungan akan sentiasa menggelembung ke lapisan induk untuk mencari kebergantungan. Versi lama Angular (sebelum v6) membahagikan proses penghuraian suntikan kepada penyuntik modul berbilang peringkat, penyuntik komponen berbilang peringkat dan penyuntik elemen. Versi baharu (selepas v9) dipermudahkan kepada model dua peringkat Rantaian pertanyaan pertama ialah penyuntik elemen tahap DOM statik, penyuntik komponen, dsb., secara kolektif dipanggil penyuntik elemen dan rantai pertanyaan yang lain. ialah penyuntik modul. Susunan penghuraian dan nilai lalai selepas kegagalan penghuraian dijelaskan dengan lebih jelas dalam dokumen ulasan kod rasmi (provider_flag).

Rajah 2 Proses carian kebergantungan penyuntik dua peringkat (Sumber imej)

Maksudnya, komponen/arahan dan tahap komponen/arahan disediakan Kandungan yang disuntik akan terlebih dahulu mencari kebergantungan dalam elemen dalam paparan komponen sehingga ke elemen akar Jika ia tidak ditemui, ia kemudiannya akan mencari dalam modul di mana elemen itu berada dan rujukan (termasuk rujukan modul dan rujukan pemuatan malas penghalaan) modul induk modul sehingga modul Root dan modul platform ditemui.

Perhatikan bahawa penyuntik di sini mempunyai warisan Penyuntik elemen boleh mencipta dan mewarisi fungsi carian penyuntik unsur induk, dan penyuntik modul adalah serupa. Selepas pewarisan berterusan, ia menjadi sedikit seperti rantai prototaip objek js.

2.2 Pembekal konfigurasi

Memahami urutan keutamaan penyelesaian pergantungan, kami boleh menyediakan kandungan pada tahap yang sesuai. Kita sudah tahu bahawa ia datang dalam dua jenis: suntikan modul dan suntikan elemen.

• Penyuntik modul: Anda boleh mengkonfigurasi penyedia dalam atribut metadata @NgModule, dan anda juga boleh menggunakan pernyataan @Injectable yang disediakan selepas v6. Pernyataan provideIn ialah nama modul, 'root ', dsb. (Sebenarnya terdapat dua penyuntik di atas modul akar, Platform dan Null, ia tidak akan dibincangkan di sini.)

• Penuntik elemen: dalam atribut metadata komponen @Component Anda boleh mengkonfigurasi pembekal , viewProviders atau penyedia dalam metadata @Directive arahan.

Selain itu, sebenarnya, selain menggunakan penyuntik modul pengisytiharan, penghias @Injectable juga boleh Diisytiharkan sebagai penyuntik unsur. Lebih kerap ia akan diisytiharkan seperti yang disediakan pada akar untuk melaksanakan singleton. Ia menyepadukan metadata melalui kelas itu sendiri untuk mengelakkan modul atau komponen secara langsung mengisytiharkan pembekal Dengan cara ini, jika kelas itu tidak mempunyai sebarang perkhidmatan arahan komponen dan kelas lain untuk menyuntiknya, tidak akan ada kod yang dipautkan kepada pengisytiharan jenis dan. ia boleh diabaikan oleh pengkompil, dengan itu mencapai Shake the tree.

Satu lagi cara untuk menyediakannya ialah dengan terus memberikan nilai apabila mengisytiharkan InjectionToken.

Berikut ialah templat ringkas untuk kaedah ini:

@NgModule({  providers: [
    // 模块注入器
  ]
})
export class MyModule {}

@Component({  providers: [
    // 元素注入器 - 组件
  ]，  
  viewProviders: [
      // 元素注入器- 组件视图
  ]
})
export class MyComponent {}

@Directive({  providers: [
   // 元素注入器 - 指令
 ]
})
export class MyDirective {}

@Injectable({
 providedIn: 'root'
})
export class MyService {}

export const MY_INJECT_TOKEN = new InjectionToken<myclass>('my-inject-token', {
 providedIn: 'root',
 factory: () => {
    return new MyClass();
 }
});</myclass>

Pilihan yang berbeza untuk menyediakan lokasi pergantungan akan membawa beberapa perbezaan , akhirnya menjejaskan saiz pakej, skop tanggungan yang boleh disuntik dan kitaran hayat tanggungan. Terdapat penyelesaian yang berbeza untuk senario yang berbeza, seperti singleton (root), pengasingan perkhidmatan (modul), berbilang tetingkap pengeditan (komponen), dll. Anda harus memilih lokasi yang munasabah untuk mengelakkan maklumat dikongsi yang tidak sesuai atau pembungkusan kod berlebihan.

2.3 Pelbagai alatan fungsi nilai

Jika anda hanya menyediakan suntikan contoh, ia tidak menunjukkan fleksibiliti suntikan kebergantungan rangka kerja sudut. Angular menyediakan banyak alat suntikan fleksibel useClass mencipta kejadian baharu secara automatik, useValue menggunakan nilai statik, useExisting boleh menggunakan semula kejadian sedia ada, dan useFactory dibina melalui fungsi, dengan deps tertentu dan parameter pembina yang ditentukan. Anda boleh memotong token kelas dan menggantikannya dengan contoh lain yang telah anda sediakan Anda boleh mencipta token untuk menyimpan nilai atau contoh dahulu, dan kemudian menggantikannya semula apabila anda perlu menggunakannya kemudian fungsi kilang untuk mengembalikannya Maklumat tempatan contoh dipetakan ke objek atau nilai atribut lain. Permainan di sini akan dijelaskan melalui kes berikut, jadi saya tidak akan membahasnya di sini. Laman web rasmi juga mempunyai banyak contoh untuk rujukan.

2.4 Pengguna suntikan dan penghias

Suntikan dalam Angular boleh disuntik dalam pembina, atau anda boleh mendapatkan penyuntik untuk mendapatkan yang sedia ada melalui kaedah get Inject elements .

Angular menyokong penambahan penghias untuk menandakan semasa menyuntik,

• @Host() untuk mengehadkan menggelegak
• @Self() untuk mengehadkan menggelegak kepada elemen itu sendiri
• @SkipSelf() Hadkan kepada elemen itu sendiri
• @Optional() Tandakan sebagai pilihan
• @Inject() Hadkan kepada token Token tersuai

Berikut ialah artikel "@Self or @Optional @Host? Panduan visual kepada penghias Angular DI." yang menunjukkan dengan jelas perkara yang akan berlaku jika penghias berbeza digunakan antara komponen induk dan anak perbezaan antara kejadian hit.

Rajah 3 Hasil penapisan penghias suntikan berbeza

2.4.1 Tambahan: Paparan hos dan @Host

Antara penghias ini, @Host mungkin yang paling sukar untuk difahami Berikut ialah beberapa arahan khusus untuk @Host. Penjelasan rasmi penghias @Host ialah

...dapatkan kebergantungan daripada mana-mana penyuntik sehingga mencapai elemen hos

Hos di sini bermaksud hos Penghias @Host akan mengehadkan skop pertanyaan kepada elemen hos. Apakah elemen hos? Jika komponen B ialah komponen yang digunakan oleh templat komponen A, maka contoh komponen A ialah elemen hos bagi contoh komponen B. Kandungan yang dijana oleh templat komponen dipanggil Paparan yang sama mungkin pandangan yang berbeza untuk komponen yang berbeza. Jika komponen A menggunakan komponen B dalam skop templatnya sendiri (lihat Rajah 4), paparan (bahagian kotak merah) yang dibentuk oleh kandungan templat A ialah paparan terbenam komponen A, dan komponen B berada dalam paparan ini, jadi Untuk B , pandangan ini ialah pandangan hos B. Penghias @Host mengehadkan skop carian kepada paparan hos Jika ia tidak ditemui, ia tidak akan timbul.

Rajah 4 Paparan terbenam dan paparan hos

3 Kes dan permainan

Di bawah ini kami menggunakan sebenar Mari kita ambil kes untuk melihat cara suntikan pergantungan berfungsi, cara menyelesaikan masalah ralat dan cara bermain.

3.1 Kes 1: Tetingkap modal mencipta komponen dinamik, tetapi komponen itu tidak ditemui

Komponen tetingkap modal pustaka komponen DevUI menyediakan perkhidmatan ModalService, yang Kotak modal boleh muncul dan boleh dikonfigurasikan sebagai komponen tersuai. Pelajar perniagaan sering melaporkan ralat semasa menggunakan komponen ini, mengatakan bahawa pakej tidak dapat mencari komponen tersuai.

Sebagai contoh, laporan ralat berikut:

Rajah 5 Apabila menggunakan ModalService, laporan ralat untuk mencipta komponen yang merujuk kepada EditorX tidak dapat mencari perkhidmatan yang sepadan pembekal

Analisis cara ModalService mencipta komponen tersuai, Kod sumber ModalService Fungsi terbuka baris 52 dan 95. Seperti yang anda lihat, jika componentFactoryResolver tidak dimasukkan, gunakan componentFactoryResolver yang disuntik oleh ModalService. Dalam kebanyakan kes, perniagaan akan memperkenalkan DevUIModule sekali dalam modul akar, tetapi tidak akan memperkenalkan ModalModule dalam modul semasa. Maksudnya, keadaan semasa dalam Rajah 6 adalah seperti ini. Menurut Rajah 6, tiada EditorXModuleService dalam penyuntik ModalService.

Rajah 6 Gambar rajah perhubungan penyediaan perkhidmatan modul

Menurut pewarisan penyuntik, terdapat empat penyelesaian:

• Letakkan EditorXModule di mana ModalModule diisytiharkan, supaya penyuntik boleh mencari EditorModuleService yang disediakan oleh EditorXModule - ini adalah penyelesaian yang paling teruk Pemuatan malas yang dilaksanakan oleh loadChildren itu sendiri adalah untuk mengurangkan pemuatan modul halaman utama, dan hasilnya adalah. subhalaman Kandungan yang perlu digunakan diletakkan dalam AppModule Modul teks kaya yang besar dimuatkan pada beban pertama, yang memburukkan FMP (First Meaningful Paint) dan tidak boleh diterima pakai.

• Perkenalkan ModalService dalam modul yang memperkenalkan EditorXModule dan menggunakan ModalService - adalah dinasihatkan. Terdapat hanya satu situasi yang tidak digalakkan, iaitu, memanggil ModalService adalah satu lagi Perkhidmatan awam peringkat tinggi, yang masih meletakkan modul yang tidak diperlukan pada lapisan atas untuk dimuatkan.

• Apabila mencetuskan komponen menggunakan ModalService, suntik componentFactoryResolver modul semasa dan hantarkannya ke parameter fungsi terbuka ModalService - adalah dinasihatkan untuk memperkenalkan EditorXModule di mana ia sebenarnya digunakan .

• Dalam modul yang digunakan, sediakan ModalService secara manual - adalah dinasihatkan untuk menyelesaikan masalah carian yang disuntik.

Empat kaedah itu sebenarnya menyelesaikan masalah EditorXModuleService dalam rantaian dalaman penyuntik componentFactoryResolver yang digunakan oleh ModalService. Dengan memastikan rantaian carian berada pada dua tahap, masalah ini dapat diselesaikan.

Ringkasan mata pengetahuan: Pewarisan penyuntik modul dan skop carian.

3.2 Kes 2: CdkVirtualScrollFor tidak dapat mencari CdkVirtualScrollViewport

Biasanya apabila kami menggunakan templat yang sama di beberapa tempat, kami akan mengekstrak bahagian biasa melalui templat DevUI Select sebelumnya komponen Semasa pembangunan, pembangun ingin mengekstrak bahagian yang dikongsi dan melaporkan ralat.

Rajah 7 ralat pergerakan kod dan suntikan tidak ditemui

Ini kerana arahan CdkVirtualScrollFor perlu menyuntik CdkVirtualScrollViewport Walau bagaimanapun, sistem pewarisan penyuntik elemen mewarisi DOM perhubungan AST statik, dan yang dinamik tidak boleh digunakan, dan tingkah laku pertanyaan berikut berlaku carian gagal.

Rajah 8 Rangkaian Pertanyaan Penyuntik Elemen Julat Carian

Penyelesaian akhir: Sama ada 1) mengekalkan kedudukan kod asal tidak berubah, atau 2) perlu menukar keseluruhan Anda boleh menemuinya tertanam dalam templat.

Rajah 9 Benamkan keseluruhan modul supaya CdkVitualScrollFo boleh menemui CdkVirtualScrollViewport (Penyelesaian 2)

Ringkasan titik pengetahuan: Rantaian pertanyaan pengawal ialah nenek moyang elemen DOM bagi templat statik.

3.3 Kes 3: Komponen pengesahan borang dirangkumkan ke dalam sub-komponen dan tidak boleh disahkan

Kes ini datang daripada blog ini "Sudut: Bersarang borang dipacu templat》.

Kami juga menghadapi masalah yang sama apabila menggunakan pengesahan borang. Seperti yang ditunjukkan dalam Rajah 10, atas sebab tertentu kami merangkum alamat tiga medan ke dalam komponen untuk digunakan semula.

Rajah 10 Merangkumkan tiga medan alamat borang ke dalam sub-komponen

Pada masa ini kita akan mendapati ralat dilaporkan, ngModelGroup memerlukan ControlContainer dalaman hos, iaitu kandungan yang disediakan oleh arahan ngForm.

Rajah 11 ngModelGroup tidak dapat mencari ControlContainer

Melihat pada kod ngModelGroup, anda dapat melihat bahawa ia hanya menambah sekatan penghias hos.

Rajah 12 ng_model_group.ts mengehadkan skop ControlContainer yang disuntik

Di sini anda boleh menggunakan viewProvider dengan usingExisting untuk menambah Provider of ControlContainer pada paparan hos bagi AddressComponent

Rajah 13 Gunakan viewProviders untuk menyediakan pembekal luaran kepada komponen bersarang

Ringkasan mata pengetahuan: Gabungan hebat viewProvider dan menggunakanSedia Ada.

3.4 Kes 4: Perkhidmatan yang disediakan oleh modul seret dan lepas tidak lagi bersifat tunggal kerana malas memuatkan, mengakibatkan ketidakupayaan untuk menyeret dan menjatuhkan antara satu sama lain

Platform perniagaan dalaman melibatkan rentas sempadan Menyeret berbilang modul melibatkan pemuatan malas loadChildren Setiap modul akan membungkus DragDropModule pustaka komponen DevUI secara berasingan, yang menyediakan DragDropService. Arahan seret dan lepas dibahagikan kepada arahan Boleh Seret dan Arahan Boleh Lepas Kedua-dua arahan berkomunikasi melalui DragDropService. Pada asalnya, adalah mungkin untuk berkomunikasi dengan memperkenalkan modul yang sama dan menggunakan Perkhidmatan yang disediakan oleh modul Walau bagaimanapun, selepas malas memuatkan, modul DragDropModule telah dibungkus dua kali, yang juga menghasilkan dua kejadian terpencil. Pada masa ini, arahan DragDropService dalam modul yang dimuatkan malas tidak boleh berkomunikasi dengan arahan Droppable dalam modul lain yang dimuatkan dengan malas, kerana DragDropService bukanlah contoh yang sama pada masa ini.

Rajah 14 Pemuatan modul yang malas menyebabkan perkhidmatan tidak menjadi contoh/singleton yang sama

Adalah jelas bahawa pernyataan kami memerlukan singleton dan singleton pendekatan Biasanya hanya providerIn: 'root' baik-baik saja, maka mengapa tidak membiarkan DragDropService perpustakaan komponen tidak disediakan di peringkat modul, tetapi terus menyediakannya dalam domain akar. Tetapi jika anda memikirkannya dengan teliti, terdapat masalah lain di sini. Pustaka komponen itu sendiri disediakan untuk digunakan oleh pelbagai perniagaan Jika sesetengah perniagaan mempunyai dua kumpulan seret dan lepas yang sepadan di dua tempat pada halaman, mereka tidak mahu dipautkan. Pada masa ini, singleton memusnahkan pengasingan semula jadi berdasarkan modul.

Maka adalah lebih munasabah untuk melaksanakan penggantian tunggal oleh pihak perniagaan. Ingat rantai pertanyaan pergantungan yang kami nyatakan sebelum ini Penyuntik elemen dicari terlebih dahulu. Jadi idea pengganti ialah kami boleh menyediakan penyedia peringkat elemen.

Rajah 15 Gunakan kaedah sambungan untuk mendapatkan DragDropService baharu dan tandakannya seperti yang disediakan pada peringkat akar

Rajah 16 Anda boleh menggunakan pemilih yang sama untuk menindih arahan berulang, menindih arahan tambahan pada arahan Boleh Seret dan Arahan Droppable pustaka komponen, dan menggantikan token DragDropService dengan DragDropGlobalService yang telah menyediakan satu tunggal pada akarnya

Sebagai contoh Rajah 15 dan 16, kami menggunakan penyuntik elemen untuk menindih arahan dan menggantikan token DragDropService dengan contoh tunggal global kami sendiri. Pada masa ini, di mana kita perlu menggunakan DragDropService tunggal global, kita hanya perlu memperkenalkan modul yang mengisytiharkan dan mengeksport kedua-dua arahan tambahan ini untuk membolehkan arahan Draggable arahan Droppable pustaka komponen berkomunikasi merentas modul memuatkan malas.

Ringkasan mata pengetahuan: Penyuntik elemen mempunyai keutamaan yang lebih tinggi daripada penyuntik modul.

3.5 Kes 5: Cara melampirkan menu lungsur ke masalah setempat dalam senario fungsi tema setempat

Tema pustaka komponen DevUI menggunakan tersuai CSS atribut (pembolehubah css ) mengisytiharkan: nilai pembolehubah css akar untuk mencapai penukaran tema. Jika kami ingin memaparkan pratonton tema yang berbeza pada masa yang sama dalam satu antara muka, kami boleh mengisytiharkan semula pembolehubah css secara setempat dalam elemen DOM untuk mencapai fungsi tema tempatan. Semasa saya membuat penjana dither tema sebelum ini, saya menggunakan kaedah ini untuk menggunakan tema secara tempatan.

Rajah 17 Fungsi tema separa

Tetapi hanya menggunakan nilai pembolehubah css secara tempatan tidak mencukupi. Terdapat beberapa lapisan pop timbul jatuh turun dilampirkan pada hujung badan secara lalai , iaitu, lapisan lampirannya berada di luar pembolehubah tempatan, yang akan menyebabkan masalah yang sangat memalukan. Kotak lungsur turun komponen tema tempatan memaparkan gaya tema luaran.

Rajah 18 Tema kotak lungsur tindanan yang dilampirkan pada komponen luaran dalam tema tempatan adalah tidak betul

Apakah yang perlu saya lakukan pada masa ini? Kita harus memindahkan titik lampiran kembali ke dalam dom tema tempatan.

Adalah diketahui bahawa Tindanan komponen DatePickerPro pustaka komponen DevUI menggunakan Tindanan CDK Sudut Selepas satu pusingan analisis, kami menggantikannya dengan suntikan seperti berikut:

1) Pertama, kami mewarisi OverlayContainer dan melaksanakan ElementOverlayContainer kami sendiri ditunjukkan di bawah.

Rajah 19 Sesuaikan ElementOverlayContainer dan gantikan logik _createContainer

2) Kemudian pada bahagian komponen pratonton, berikan terus ElementOverlayContainer baharu kami dan sediakan Tindanan baharu supaya Overlay baharu boleh menggunakan OverlayContainer kami. Pada asalnya, Overlay dan OverlayContainer kedua-duanya disediakan pada akar Di sini kita perlu merangkumi kedua-dua ini.

Rajah 20 Gantikan OverlayContainer dengan ElementOverlayContainer tersuai dan sediakan Overlay baharu

Pada masa ini, pergi ke pratonton tapak web dan DOM pop timbul -lapisan atas akan berjaya dilampirkan pada elemen pratonton komponen.

Rajah 21 Bekas Tindanan cdk dilampirkan pada dom yang ditentukan, dan pratonton tema separa berjaya

Terdapat juga OverlayContainerRef tersuai di dalam Pustaka komponen DevUI Sesetengah komponen dan bangku laci kotak modal juga perlu diganti dengan sewajarnya. Akhir sekali, lapisan pop timbul dan lapisan pop timbul lain boleh direalisasikan untuk menyokong tema tempatan dengan sempurna.

Ringkasan mata pengetahuan: Corak abstraksi yang baik boleh menjadikan modul boleh diganti dan mencapai pengaturcaraan aspek yang elegan.

3.6 Kes 6: CdkOverlay memerlukan arahan CdkScrollable untuk ditambahkan pada bar skrol, tetapi ia tidak boleh ditambahkan pada lapisan paling luar komponen kemasukan

Yang terakhir dicapai Sebagai kajian kes, saya ingin bercakap tentang pendekatan yang kurang formal untuk membantu semua orang memahami intipati penyedia contoh sedia ada.

Kami tahu bahawa jika kami menggunakan cdkOverlay, jika kami mahu kotak pop timbul mengikut bar skrol dan digantung pada kedudukan yang betul, kami perlu menambah arahan cdkScrollable pada bar skrol.

Ia masih sama seperti contoh sebelumnya. Seluruh halaman kami dimuatkan melalui penghalaan Untuk memudahkan, saya menulis bar skrol pada hos komponen.

Rajah 22 Bar skrol limpahan kandungan menulis limpahan:auto dalam komponen:hos

Dengan cara ini, kami menghadapi masalah yang lebih sukar ditentukan oleh definisi penghala, iaitu, <app-theme-picker-customize></app-theme-picker-customize> tidak dipanggil secara eksplisit di mana-mana, jadi bagaimanakah arahan cdkScrollable perlu ditambah? Penyelesaiannya adalah seperti berikut Beberapa kod tersembunyi di sini dan hanya tinggal kod teras.

Rajah 23 Cipta contoh melalui suntikan dan panggil kitaran hayat secara manual

Di sini, tika cdkScrollable dijana melalui suntikan dan kitaran hayat dipanggil serentak semasa peringkat kitaran hayat komponen.

Penyelesaian ini bukan kaedah formal, tetapi ia menyelesaikan masalah ini sebagai idea dan penerokaan untuk dirasai oleh pembaca.

Ringkasan mata pengetahuan: Pembekal konfigurasi suntikan ketergantungan boleh mencipta tika, tetapi sila ambil perhatian bahawa tika akan dianggap sebagai kelas Perkhidmatan biasa dan tidak boleh mempunyai kitaran hayat yang lengkap.

3.7 Lebih banyak cara untuk bermain: Sesuaikan platform gantian untuk merealisasikan interaksi rangka kerja Sudut yang berjalan pada terminal

Anda boleh merujuk catatan blog ini: "Rendering Angular applications in Terminal》

Rajah 24 Gantikan RendererFactory2 dan kandungan lain untuk membiarkan Angular berjalan pada terminal

Pengarang menggantikan RendererFactory2 dan seterusnya Renderer membenarkan aplikasi Sudut untuk dijalankan pada terminal. Ini adalah fleksibiliti reka bentuk Angular Malah platform boleh digantikan. Butiran penggantian terperinci boleh didapati dalam artikel asal dan tidak akan dikembangkan di sini.

Ringkasan mata pengetahuan: Kuasa suntikan pergantungan ialah pembekal boleh mengkonfigurasinya dengan sendirinya dan akhirnya melaksanakan logik gantian.

4 Ringkasan

Artikel ini memperkenalkan mod suntikan kebergantungan bagi penyongsangan kawalan dan faedahnya Ia juga memperkenalkan cara suntikan kebergantungan dalam Angular mencari kebergantungan dan cara mengkonfigurasi penyedia. Cara menggunakan penghias terhad dan penapisan untuk mendapatkan contoh yang diingini, dan menganalisis lebih lanjut melalui N kes cara menggabungkan titik pengetahuan suntikan pergantungan untuk menyelesaikan masalah yang dihadapi dalam pembangunan dan pengaturcaraan.

Dengan pemahaman yang betul tentang proses carian pergantungan, kami boleh mengkonfigurasi penyedia di lokasi yang tepat (Kes 1 dan 2), menggantikan kejadian lain dengan tunggal (Kes 4 dan 5), dan juga bersarang silang Kekangan daripada pakej komponen disambungkan kepada contoh yang disediakan (Kes 3) atau keluk kaedah yang disediakan digunakan untuk melaksanakan instantiasi arahan (Kes 6).

Kes 5 nampaknya merupakan pengganti yang mudah, tetapi untuk dapat menulis struktur kod yang boleh diganti memerlukan pemahaman yang mendalam tentang mod suntikan dan abstraksi yang lebih baik dan munasabah bagi setiap fungsi tidak dibenarkan Apabila ini berlaku, kesan maksimum suntikan pergantungan tidak boleh dikenakan. Mod suntikan menyediakan lebih banyak ruang yang mungkin untuk modul boleh pasang, pasang masuk dan berasaskan bahagian, mengurangkan gandingan dan meningkatkan kelenturan, supaya modul boleh berfungsi bersama dengan lebih elegan dan harmoni.

Fungsi suntikan kebergantungan adalah berkuasa Selain mengoptimumkan laluan komunikasi komponen, yang lebih penting, ia juga boleh mencapai penyongsangan kawalan, mendedahkan komponen terkapsul kepada lebih banyak aspek pengaturcaraan dan pelaksanaan beberapa logik khusus perniagaan juga boleh menjadi fleksibel.

Untuk lebih banyak pengetahuan berkaitan pengaturcaraan, sila lawati: Video Pengaturcaraan! !

Atas ialah kandungan terperinci Pemahaman mendalam tentang corak suntikan kebergantungan dalam Angular (kes mainan). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!