angular的幾種依賴注入方式
阿新 • • 發佈:2018-12-10
1、useClass
提供器的一種寫法是這樣的
providers: [...Service...],
其完全寫法為
providers: [{provide:Service,useClass:Service}],
provide提供token而實際使用的服務為useClass宣告的服務,下面這種
providers: [{provide:Service,useClass:anotherService}],
如果anotherService需要實現其他的類則要把類中的方法實現如:anotherService實現Service
Service類
import { Injectable } from '@angular/core'; @Injectable() export class ServiceService { constructor() { } methods(){ console.log('第一種服務類') } }
anotherService類
import { Injectable } from '@angular/core'; import {ServiceService} from './service.service'; @Injectable() export class AnotherServiceService implements ServiceService{ constructor() { } methods(){ console.log('另一服務服務類') } anotherMethods(){ console.log('另一服務服務類') } }
同時服務之間也可以互相使用,前提是必須加上@Injectable()裝飾器,
使用法跟元件中一樣在建構函式中注入服務。
2、值
它的提供器的token為字串,使用的是useValue,可以是一個物件,也可以是一個值
providers: [{provide:‘IS_Value’,useValue:false}],
注意在元件中獲取的方式略有不同,data即為獲取到的值
constructor(@Inject('IS_Value') private data) { }
3、工廠方法定義提供器
工廠方法只會被呼叫一次寫法如下
provides:[ { provide:ServiceService, useFactory:()=>{ let dev=Math.random()>0.5 if(dev){ return new ServiceService() }else { return new AnotherServiceService() } } } ]
如果工廠函式想要使用提供器的其他服務加入屬性deps,並以引數的形式傳入
provides:[
loggerService,
{
provide:ServiceService,
useFactory:(logger:loggerService)=>{
let dev=Math.random()>0.5
if(dev){
return new ServiceService(logger)
}else {
return new AnotherServiceService(logger)
}
}
deps:[loggerService]
}
]
這樣就相當於例項化了loggerService,不過條件不簡單的是通過一個隨機數,我們也可以傳進去一個值
provides:[
loggerService,
{provide:‘IS_Value’,useValue:false}
{
provide:ServiceService,
useFactory:(logger:loggerService,val)=>{
let dev=Math.random()>0.5
if(dev){
return new ServiceService(logger)
}else {
return new AnotherServiceService(logger)
}
}
deps:[loggerService,'IS_Value']
}
]
然後工廠函式會根據deps第二個值搜尋並把它傳給第二個引數