Un guide étape par étape pour comprendre l'injection de dépendances dans Angular

Cet article vous amènera à comprendre l'injection de dépendances, à présenter les problèmes que l'injection de dépendances résout et sa méthode d'écriture native, et à parler du cadre d'injection de dépendances de Angular. J'espère que cela sera utile à tout le monde !

Récemment, je tombe souvent sur l'injection de dépendances de mots clés dans les projets Angular, mais je ne comprends toujours pas comment elle est implémentée. Le site officiel d'Angular ne parle que de son utilisation, et les principes détaillés ne sont pas expliqués. , expliquons-le donc à partir de la méthode d'écriture native, quels problèmes l'injection de dépendances est utilisée pour résoudre et comment elle doit être exprimée en utilisant js. [Recommandations de didacticiel associées : "tutoriel angulaire"]

Qu'est-ce que l'injection de dépendances ? L'injection de dépendances, appelée DI, est un principe de conception en programmation orientée objet qui est utilisé pour réduire le couplage entre les codes.

Regardons d'abord un morceau de code

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()

Supposons que nous utilisions une classe vidéo, qui a une méthode getScreenshot pour obtenir des captures d'écran Lors de l'instanciation de la classe vidéo, nous devons transmettre un paramètre tel qu'une URL vidéo. Il existe maintenant une classe de notes, qui doit appeler la méthode de capture d'écran sous la classe vidéo. Nous pouvons alors dire que la classe de notes dépend de la classe vidéo. Ainsi, à l'intérieur de la classe note, nous devons instancier la classe vidéo, afin de pouvoir obtenir l'objet instance de la classe vidéo dans la classe note et y appeler la méthode de capture d'écran.

Le couplage du code ci-dessus est trop élevé et n'est pas recommandé. Par exemple, si l'adresse vidéo de la vidéo est modifiée, l'URL de la vidéo entrante doit être modifiée dans Remarque. Cela suppose que s'il y a plus de classes qui dépendent. on Pour les vidéos, une fois les modifications apportées, tout doit être changé en conséquence, ce qui est très gênant.

Ensuite, nous utilisons l'injection de dépendances pour résoudre le problème ci-dessus :

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

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

Nous instancions la classe vidéo en dehors de la classe et transmettons l'instance à la classe note via le passage de paramètres. De cette façon, le degré de couplage peut également être résolu avec succès. Si cela pose un problème, nous appelons cette façon de faire passer les instances via des paramètres : injection.

AvantagesGrâce à l'injection de dépendances, le couplage entre les codes est réduit et la maintenabilité du code est augmentée. Les modifications de code dans la classe vidéo n’affecteront pas la classe note.

Cadre DI d'Angular

Dans le processus d'implémentation ci-dessus, il y a encore une chose qui n'est pas particulièrement idéale, c'est-à-dire que nous devons instancier la classe vidéo en dehors de la classe. Bien que ce soit le seul endroit, nous espérons toujours que le. classe vidéo Peu importe la façon dont vous le modifiez en interne, cela n'affectera pas le code externe.

Dans le framework DI fourni par Angular, nous n'avons pas besoin d'instancier la classe vidéo nous-mêmes. Cela cache le processus d'implémentation de l'injection de dépendances. Pour les développeurs, il suffit d'utiliser des capacités d'injection de dépendances très simples.

Il y a quatre concepts de base dans la DI d'Angular :

Dépendance : l'objet d'instance dont dépend le composant, l'objet d'instance de service
Token : obtenez l'identité de l'objet d'instance de service, Angular conservera de nombreuses instances objets, lorsque nous avons besoin de l'obtenir, nous devons l'obtenir via l'identification
Injecteur : Injecteur, responsable de la création et de la maintenance des objets d'instance des classes de service, de l'injection d'objets d'instance de service dans les composants et de leur transmission à chaque composant via paramètres
Procider : Objet, utilisé pour configurer l'injecteur, spécifier la classe de service pour créer l'objet instance de service et obtenir l'identifiant de l'objet instance
Injecteur injecteur

Nous créons d'abord un injecteur via la syntaxe de base fourni par Angular

1. Créez un injecteur

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

Introduisez réfléchissantInjector. La méthode solveAndCreate est utilisée pour créer un injecteur. Dans le tableau se trouve la classe qui doit créer un objet instance. injecteur. 2. Obtenez l'objet d'instance de classe de service dans l'injecteur

const video = injector.get(Video)

Il existe une méthode get sous l'injecteur, qui est utilisée pour transmettre l'identifiant et obtenir l'objet d'instance. L'identifiant par défaut est le nom de la classe de service, qui est. Video

pour que nous puissions l'obtenir L'objet instance de Video. Le framework DI fourni par Angular nous permet de ne pas avoir besoin d'instancier manuellement une classe pour obtenir son objet instance.

2. L'objet instance du service est en mode singleton. Lorsque l'injecteur crée l'instance de service, il regrette de la mettre en cache

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

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

C'est-à-dire que peu importe le nombre de fois où l'objet instance est obtenu via le framework, il renvoie le même objet d'instance

3 Mais nous pouvons créer plusieurs injecteurs. Les objets instanciés par le même service renvoyés par différents injecteurs ne sont pas les mêmes

const injector1 = ReflectiveInjector.resolveAndCreate([ Video ])
const injector2 = ReflectiveInjector.resolveAndCreate([ Video ])

const video1 = injector1.get(Video)
const video2 = injector2.get(Video)

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

4. est solveAndCreateChild.Cette méthode créera un injecteur enfant. La relation entre l'injecteur parent et l'injecteur enfant est similaire à la chaîne de portée de js. Si l'injecteur actuel est introuvable, il ira à l'injecteur parent pour le trouver. tel que :

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以及更多的扩展。

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!