Angular中依賴注入的概念分析

這篇文章主要為大家展示了“Angular中依賴注入的概念分析”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“Angular中依賴注入的概念分析”這篇文章吧。

依賴注入概念：

維基百科對依賴注入的解釋：在軟件工程中，依賴注入是實現控制反轉的一種軟件設計模式，一個依賴是一個被其他對象(client)調用的對象（服務）,注入則是將被依賴的對象(service)實例傳遞給依賴對象(client)的行為。

將 被依賴的對象傳給依賴者，而不需要依賴者自己去創建或查找所需對象是DI的基本原則。

依賴注入允許程序設計遵從依賴倒置原則（簡單的說就是要求對抽象進行編程，不要對實現進行編程，這樣就降低了客戶與實現模塊間的耦合） 調用者(client)只需知道服務的接口，具體服務的查找和創建由注入者(injector)負責處理并提供給client，這樣就分離了服務和調用者的依賴，符合低耦合的程序設計原則。也是依賴注入的主要目的?！鞠嚓P教程推薦：《angular教程》】

控制反轉

控制反轉和依賴注入是相輔相成的。例子：classA依賴classB但是classA不主動創建classB的實例，通過參數的形式傳遞進來。

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

Angular依賴注入是實例化組件的時候，將服務的實例傳遞進來，形成了控制反轉。

依賴注入

Angular依賴注入使用的都是一個實例，也是Angular通過服務通信的一種方式。如果不適用依賴注入，多個實例，組件間通信也就無法使用服務了。 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>('描述令牌的用途');

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

}

以上是“Angular中依賴注入的概念分析”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！