Panduan langkah demi langkah untuk memahami suntikan pergantungan dalam Angular

Artikel ini akan membawa anda memahami suntikan kebergantungan, memperkenalkan masalah yang diselesaikan oleh suntikan ketergantungan dan kaedah penulisan asalnya, dan bercakap tentang rangka kerja suntikan kebergantungan Angular Saya harap ia akan membantu semua orang !

Baru-baru ini, saya sering menjumpai suntikan ketergantungan kata kunci dalam projek Angular, tetapi saya masih tidak faham cara ia dilaksanakan Di tapak web rasmi Angular , hanya ada Mengenai penggunaannya, prinsip terperinci tidak dijelaskan, jadi mari kita jelaskan dari kaedah penulisan asli, apakah masalah suntikan pergantungan yang digunakan untuk menyelesaikannya, dan bagaimana ia harus dinyatakan menggunakan js. [Cadangan tutorial berkaitan: "tutorial sudut"]

Apakah suntikan kebergantungan?

Suntikan kebergantungan, dirujuk sebagai DI, ialah prinsip reka bentuk dalam pengaturcaraan berorientasikan objek . Kurangkan gandingan antara kod.

Mari kita lihat sekeping kod dahulu

class Video{
    constructor(url){}
}

class Note{
    video: Video
    constructor(){
        this.video = new Video("https://aaaaa.mp4")
    }
    
    getScreenshot(){
        this.video.getScreenshot()
    }
}

const note = new Note()
note.getScreenshot()

Andaikan kita menggunakan kelas video, yang mempunyai kaedah getScreenshot untuk mendapatkan tangkapan skrin semasa membuat seketika kelas video, video perlu diluluskan dalam parameter url. Sekarang terdapat kelas nota, yang perlu memanggil kaedah tangkapan skrin di bawah kelas video Kemudian kita boleh mengatakan bahawa kelas nota bergantung pada kelas video. Jadi di dalam kelas nota, kita perlu membuat instantiate kelas video, supaya kita boleh mendapatkan objek contoh kelas video dalam kelas nota dan memanggil kaedah tangkapan skrin di dalamnya.

Gandingan kod di atas adalah terlalu tinggi dan tidak disyorkan Contohnya, jika alamat video Video ditukar, maka url video masuk perlu ditukar dalam Nota lagi Kelas bergantung pada kelas video, jadi sebaik sahaja perubahan dibuat, semuanya mesti diubah sewajarnya, yang sangat menyusahkan.

Seterusnya, suntikan kebergantungan digunakan untuk menyelesaikan masalah di atas:

class Note{
    video: Video
    constructor(video: Video){
        this.video = Video;
    }
}

const video = new Video("https://aaaaa.mp4")
const note = new Note(video)

Kami membuat instantiate kelas video di luar kelas dan menghantar contoh kepada kelas nota melalui hantaran parameter cara, masalah gandingan yang berlebihan boleh berjaya diselesaikan Kami memanggil kaedah ini melalui parameter: suntikan.

Kelebihan

Suntikan kebergantungan mengurangkan gandingan antara kod dan meningkatkan kebolehselenggaraan kod. Perubahan kod dalam kelas video tidak akan menjejaskan kelas nota.

Rangka kerja DI Angular

Dalam proses pelaksanaan di atas, masih terdapat satu perkara yang tidak begitu ideal, iaitu, kita perlu membuat instantiate kelas video di luar kelas, walaupun ini adalah satu-satunya tempat , tetapi kami masih berharap bahawa tidak kira bagaimana perubahan dalaman kelas video ditukar, kod luaran tidak akan terjejas.

Dalam rangka kerja DI yang disediakan oleh Angular, kita tidak perlu membuat instantiat kelas video itu sendiri. Ia menyembunyikan proses suntikan pergantungan Untuk pembangun, mereka hanya perlu menggunakan kod yang sangat mudah kemudiannya kefungsian suntikan pergantungan.

Terdapat empat konsep teras dalam DI Angular:

• Kebergantungan: objek contoh yang komponen bergantung, objek contoh perkhidmatan

• Token: Dapatkan pengecam objek contoh perkhidmatan Angular akan mengekalkan banyak objek contoh. Apabila kita perlu mendapatkannya, kita perlu mendapatkannya melalui pengecam , bertanggungjawab untuk mencipta dan mengekalkan objek contoh kelas perkhidmatan, menyuntik objek contoh perkhidmatan ke dalam komponen dan menghantarnya kepada setiap komponen melalui parameter

• Procider: objek, digunakan untuk mengkonfigurasi penyuntik, ditentukan Cipta kelas perkhidmatan objek instance perkhidmatan dan dapatkan pengecam objek instance

• Injector injector

Kami mula-mula mencipta injector melalui sintaks asas yang disediakan oleh Angular

1. Cipta penyuntik

Perkenalkan ReflectiveInjector Kaedah resolveAndCreate digunakan untuk membuat penyuntik Kaedah ini akan mengembalikan penyuntik. 2. Dapatkan objek contoh kelas perkhidmatan dalam penyuntik

import { ReflectiveInjector } from "@angular/core"
//服务类
class Video{}
//创建注入器并传入服务类
const injector = ReflectiveInjector.resolveAndCreate([ Video ])

Terdapat kaedah dapatkan di bawah penyuntik, yang digunakan untuk lulus dalam pengecam dan mendapatkan objek tikar Pengecam lalai ialah nama kelas perkhidmatan, iaitu Video

Dengan cara ini, kita boleh mendapatkan objek contoh Video Rangka kerja DI yang disediakan oleh Angular menjadikannya tidak perlu untuk membuat kelas secara manual untuk mendapatkan objek contohnya buat untuk kita.

const video = injector.get(Video)

2. Objek contoh perkhidmatan berada dalam mod tunggal Penyuntik menyesali menyimpannya selepas mencipta contoh perkhidmatan

Dengan kata lain, tidak kira berapa kali objek contoh. diperoleh melalui rangka kerja, Ia mengembalikan objek contoh yang sama

3 Tetapi kita boleh mencipta berbilang penyuntik. >4. Terdapat kaedah untuk membuat penyuntik kanak-kanak pada penyuntik yang dipanggil resolveAndCreateChild ditemui, ia akan mencari penyuntik induk, seperti:

const video1 = injector.get(Video)
const video2 = injector.get(Video)

console.log(video1 === video1)//true

const injector = ReflectiveInjector.resolveAndCreate([ Video ])
const injectorChild = injector.resolveAndCreateChild([])

const video1 = injector.get(Video)
const video2 = injectorChild.get(Video)

console.log(video1 === video1)//true

像上面这段代码，我们在创建子级注入器的时候，不传递参数，但是在子级注入器实例化的时候，由于自身不存在 Video 这个服务，它就会去父级查找，当然，就找到了父级的 Video 这个服务并且实例化，所以后面的两个实例化对象相等

总结

本文介绍了依赖注入解决的问题和它原生的写法是什么用的，并且介绍了Angular提供给我们的DI框架，用它提供给我们的简单api实现了实例化的过程，并且讲解了注入器，也是会分层级的，能提供给我们更好地一个项目设计方式。之后有机会再来讲解一下provider以及更多的扩展。

更多编程相关知识，请访问：编程视频！！

Atas ialah kandungan terperinci Panduan langkah demi langkah untuk memahami suntikan pergantungan dalam Angular. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!