什麼是依賴注入？本篇文章帶大家來了解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>('描述令牌的用途');
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中文網其他相關文章！
