Une analyse approfondie de l’injection de dépendances dans Angular

Qu'est-ce que l'injection de dépendances ? Cet article vous guidera à travers l'injection de dépendances dans Angular, j'espère qu'il vous sera utile !

Concept d'injection de dépendances :

Explication de Wikipédia sur l'injection de dépendances : En génie logiciel, l'injection de dépendances est un modèle de conception logicielle qui implémente une inversion de contrôle. Une dépendance est une dépendance injectée par un autre objet (L'objet. (service) appelé par le client), l'injection est l'acte de transmettre l'instance de l'objet dépendant (service) à l'objet dépendant (client).

Passer l'objet dépendant à la personne à charge sans demander à la personne à charge de créer ou de trouver l'objet requis est le principe de base de DI.

L'injection de dépendances permet à la programmation de suivre le principe d'inversion de dépendances (en termes simples, elle nécessite de programmer l'abstraction, pas l'implémentation, réduisant ainsi le couplage entre le client et le module d'implémentation. L'appelant (client) n'a besoin que de connaître le service). L'interface, la recherche et la création de services spécifiques sont gérées par l'injecteur et fournies au client. Cela sépare la dépendance du service et de l'appelant et respecte le principe de programmation à faible couplage. C'est également l'objectif principal de l'injection de dépendances. [Tutoriels associés recommandés : "Tutoriel angulaire"]

Inversion de contrôle

L'inversion de contrôle et l'injection de dépendances se complètent. Exemple : classA dépend de classB mais classA ne crée pas activement une instance de classB et la transmet en tant que paramètre.

class A {
    construct(private b: B) {}
}
class B {}
const a: A = new A(new B());

L'injection de dépendance angulaire consiste à transmettre l'instance du service lors de l'instanciation d'un composant, formant une inversion de contrôle.

Injection de dépendances

L'injection de dépendances angulaires utilise une instance et constitue également un moyen pour Angular de communiquer via des services. Si l'injection de dépendances n'est pas appliquée, plusieurs instances et la communication inter-composants ne pourront pas utiliser les services. app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, InjectionToken } from '@angular/core';
import { AppComponent } from './components/app/app.component';
import { SingleServiceService } from './service/single-service.service';
import { MyServiceService } from './service/my-service.service';
import { UseServiceService } from './service/use-service.service';
import { ValueServiceService } from './service/value-service.service';
import { ReactiveFormsModule, FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';

export interface AppConfig {
    title: string
}

export const CONFIG = new InjectionToken<AppConfig>(&#39;描述令牌的用途&#39;);

const USE_Config = {
    title: "非类的注入令牌"
}

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        HttpClientModule,
        FormsModule,
        ReactiveFormsModule
    ],
    providers: [
        SingleServiceService,
        // 完整形式
        // {provide: SingleServiceService, useClass: SingleServiceService}
        // provide 属性存有令牌，它作为一个 key，在定位依赖值和配置注入器时使用。
        // 属性二通知如何创建依赖，实际依赖的值可以是useClass、 useExisting、useValue 或 useFactory
        // useExisting起别名,依赖注入也可以注入组件
        {provide: MyServiceService, useClass: UseServiceService},
        // useValue可以是字符串，对象等
        {provide: ValueServiceService, useValue: "依赖注入字符"},
        // 使用 InjectionToken 对象来为非类的依赖选择一个提供者令牌
        { provide: CONFIG, useValue: USE_Config }
    ],
    bootstrap: [AppComponent],
    entryComponents: []
})
export class AppModule { }

SingleServiceService:

import { Injectable } from '@angular/core';

@Injectable()
export class SingleServiceService {

constructor() { }

}

MyServiceService:

import { Injectable } from '@angular/core';

@Injectable()
export class MyServiceService {

    constructor() { }

    getName(): string {
        return "my-service";
    }
    
}

UseServiceService:

import { Injectable } from '@angular/core';

@Injectable()
export class UseServiceService {

    constructor() { }

    getName(): string {
        return "use-service";
    }

}

ValueServiceService:

import { Injectable } from '@angular/core';

@Injectable()
export class ValueServiceService {

constructor() { }

}

Pour plus de connaissances liées à la programmation, veuillez visiter : Vidéo de programmation ! !

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!