深入淺析Angular中的依賴注入

什麼是依賴注入？本篇文章帶大家來了解Angular中的依賴注入，希望對大家有幫助！

依賴注入概念：

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

將 被依賴的物件傳遞給依賴者，而不需要依賴者自己去建立或尋找所需物件是DI的基本原則。

依賴注入允許程式設計遵從依賴倒置原則（簡單的說就是要求對抽象進行編程，不要對實現進行編程，這樣就降低了客戶與實現模組間的耦合） 調用者(client)只需知道服務的接口，具體服務的查找和創建由注入者(injector)負責處理並提供給client，這樣就分離了服務和調用者的依賴，符合低耦合的程序設計原則。也是依賴注入的主要目的。 【相關教學推薦：《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>(&#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() { }

}

更多程式相關知識，請造訪：程式設計影片！ ！

以上是深入淺析Angular中的依賴注入的詳細內容。更多資訊請關注PHP中文網其他相關文章！