Eine eingehende Analyse der Abhängigkeitsinjektion in Angular

Was ist Abhängigkeitsinjektion? Dieser Artikel führt Sie durch die Abhängigkeitsinjektion in Angular, ich hoffe, er wird Ihnen hilfreich sein!

Abhängigkeitsinjektionskonzept:

Wikipedia-Erklärung zur Abhängigkeitsinjektion: In der Softwareentwicklung ist Abhängigkeitsinjektion ein Software-Entwurfsmuster, das eine Umkehrung der Kontrolle implementiert (Dienst), der vom Client aufgerufen wird), Injektion ist der Vorgang der Übergabe der Instanz des abhängigen Objekts (Dienstes) an das abhängige Objekt (Client).

Die Übergabe des abhängigen Objekts an den Abhängigen, ohne dass der Abhängige das erforderliche Objekt erstellen oder finden muss, ist das Grundprinzip von DI.

Abhängigkeitsinjektion ermöglicht es der Programmierung, dem Abhängigkeitsinversionsprinzip zu folgen (vereinfacht ausgedrückt erfordert sie die Programmierung der Abstraktion, nicht der Implementierung, wodurch die Kopplung zwischen dem Client und dem Implementierungsmodul verringert wird. Der Aufrufer (Client) muss nur den Dienst kennen). Die Schnittstelle, die Suche und die Erstellung spezifischer Dienste werden vom Injektor übernommen und dem Client bereitgestellt. Dadurch wird die Abhängigkeit des Dienstes vom Aufrufer getrennt und das Prinzip der Low-Coupling-Programmierung eingehalten. Dies ist auch der Hauptzweck der Abhängigkeitsinjektion. [Verwandte Tutorial-Empfehlungen: „angular Tutorial“]

Inversion of Control

Inversion of Control und Dependency Injection ergänzen sich. Beispiel: KlasseA hängt von KlasseB ab, aber KlasseA erstellt nicht aktiv eine Instanz von KlasseB und übergibt sie als Parameter.

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

Angular-Abhängigkeitsinjektion ist die Instanziierung einer Komponente, die Übergabe an die Dienstinstanz und die Bildung einer Umkehrung der Kontrolle.

Abhängigkeitsinjektion

Die Angular-Abhängigkeitsinjektion verwendet eine Instanz und ist auch eine Möglichkeit für Angular, über Dienste zu kommunizieren. Wenn die Abhängigkeitsinjektion nicht angewendet wird, können mehrere Instanzen und die Kommunikation zwischen Komponenten keine Dienste nutzen. 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() { }

}

Weitere Programmierkenntnisse finden Sie unter: Programmiervideo! !

Das obige ist der detaillierte Inhalt vonEine eingehende Analyse der Abhängigkeitsinjektion in Angular. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!