Analisis mendalam suntikan pergantungan dalam Angular

Apakah suntikan pergantungan? Artikel ini akan membawa anda melalui suntikan pergantungan dalam Angular Saya harap ia akan membantu anda!

Konsep suntikan kebergantungan:

Penjelasan Wikipedia tentang suntikan kebergantungan: Dalam kejuruteraan perisian, suntikan Ketergantungan ialah corak reka bentuk perisian yang melaksanakan penyongsangan kawalan Kebergantungan ialah objek (perkhidmatan) yang dipanggil oleh objek lain (klien) adalah untuk menghantar contoh objek bergantung (perkhidmatan) kepada objek bergantung.

Menghantar objek bergantung kepada tanggungan tanpa memerlukan tanggungan untuk mencipta atau mencari objek yang diperlukan ialah prinsip asas DI.

Suntikan ketergantungan membolehkan pengaturcaraan mengikut prinsip penyongsangan kebergantungan (ringkasnya, ia memerlukan pengaturcaraan abstraksi, bukan pelaksanaan, sekali gus mengurangkan gandingan antara klien dan modul pelaksanaan) Pemanggil (klien) sahaja Anda perlu mengetahui antara muka perkhidmatan Pencarian dan penciptaan perkhidmatan tertentu dikendalikan oleh penyuntik dan diberikan kepada pelanggan Ini memisahkan pergantungan perkhidmatan dan pemanggil dan mematuhi prinsip pengaturcaraan gandingan rendah. Ia juga merupakan tujuan utama suntikan pergantungan. [Cadangan tutorial berkaitan: "tutorial sudut"]

Penyongsangan kawalan

Penyongsangan kawalan dan suntikan kebergantungan adalah saling melengkapi antara satu sama lain. Contoh: kelasA bergantung pada kelasB tetapi kelasA tidak mencipta contoh kelasB secara aktif dan menghantarnya sebagai parameter.

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

Suntikan kebergantungan sudut ialah apabila menginstant komponen, tika perkhidmatan dihantar masuk, membentuk penyongsangan kawalan.

Suntikan Kebergantungan

Suntikan kebergantungan sudut menggunakan contoh dan juga merupakan cara untuk Angular berkomunikasi melalui perkhidmatan. Jika suntikan pergantungan tidak digunakan, berbilang kejadian dan komunikasi antara komponen tidak akan dapat menggunakan perkhidmatan. 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";
    }

}

<🎜Value:Service

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

@Injectable()
export class ValueServiceService {

constructor() { }

}

Untuk lebih banyak pengetahuan berkaitan pengaturcaraan, sila lawati:

Video Pengaturcaraan! !

Atas ialah kandungan terperinci Analisis mendalam suntikan pergantungan dalam Angular. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!